VueLongpress
A VueJS (2.x) button component that requires you to keep pressing to confirm a given action.
DEMO
What is this?
A component that will generate a button that requires you to keep pressing for a given time to execute a given action.
Why would i need that?
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
Install
Install from npm:
npm install vue-longpress --save
Example
; var vm = el: '#app' components: Longpress methods: { // Delete the user login here console; } template: `<div> <longpress 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>`;
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.
e.g.:
In your template:
<longpress ref="deleteButton"></longpress>
In your method:
{ // delete logic here ... // and now reset the button if needed this$refsdeleteButton;}
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)