VueLongpress: button component that requires you to keep pressing to confirm a given action.

vuelongpress

The longpress component will generate a confirmation button for sensitive action, which requires to be hold for an amount of seconds to execute a given action. Think of a sensitive scenario, something like deleting a user's data, you might need to confirm for 5 seconds that you actually want to delete it, to prevent unintentional clicks.

Check the Live demo on jsFiddle

Labels templates

You can use these placeholders to display dynamic texts:

• {$counter} - how much time (in seconds) has ellapsed (i.e. from 0 to {$duration})
• {$rcounter} - how much time (in seconds) is remaining (i.e. from {$duration} to 0)
• {$duration} - how much should the user press the button in total (in seconds)

Options / Props

This component support five (5) props:

• on-confirm: a callback function that will be called when the time has ellapsed (i.e. when the counter is 0)
• value: a value that is passed as an argument to the confirmation function
• duration: how long (in seconds) the user will need to keep pressing
• pressing-text: the text to display while the user needs to "hold" the click (e.g. Keep pressing to confirm)
• action-text: the text to display when the action is executing (e.g. Please wait...)
• 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.

Example

Install

npm install vue-longpress --save

Usage

<template>
<div id="app">
<div>
    <longpress  class="btn-lg btn-danger" duration="5" pressing-text="Keep pressing for {$rcounter} seconds to delete" action-text="Deleting, please wait...">
        Click and hold to delete this user
    </longpress>
</div>
</div>
</template>

<script type="text/babel">
import Longpress from 'vue-longpress'

export default {
  components: {
    Longpress
  }
}
</script>

Result:

Find tihs Vue component on GitHub.