VueConfirmationButton

A Vue.js single file component that will generate a button that requires the user to press it multiple times in order to confirm a designated action

View demo Download Source

VueConfirmationButton

Why would i need that?

Think of a sensitive scenario, something like deleting data. Having the user read multiple warning messages before performing an action will help prevent unwanted deletions.

Install

Yarn

yarn add vue-confirmation-button

Manual

Manually download the .vue component (located in the dist) folder and add that to your project.

JS

import vueConfirmationButton from 'vue-confirmation-button';

const demo = new Vue({
  el: '.app',
  components: {
    'vue-confirmation-button': vueConfirmationButton,
  },
  data: {
    customMessages: [
      'Delete User',
      'Are you sure?',
      'Ok!'
    ],
  },
  methods: {
    deleteUser() {
      // Your Logic Here 
    },
  },
});

HTML

<div class="confirmation__button">
  <vue-confirmation-button
    :messages="customMessages"
    v-on:confirmation-success="deleteUser()">
  </vue-confirmation-button>
</div>

Details

Props

This component supports 2 props

  1. messages: An array of strings that will be displayed to the user. The last message being shown after confirmation has succeeded
  2. css: A string representing the css style that will be applied to the <button> element

Events

This component emits 3 events

  1. confirmation-success: The user has clicked the button all the way through and has successfully confirmed the action
  2. confirmation-incremented: Fired everytime the user clicks the button
  3. confirmation-reset: The button has been reset (see below)

Also there's a reset method in case you need to reset your button status. To use it you'll need to add a ref to your button and call it from there.

e.g.:

In your template:

<vue-confirmation-button ref="confirmationButton"></vue-confirmation-button>

In your method:

resetButton() {
  demo.$refs.confirmationButton.reset()
  // Your Logic Here
},

GitHub