https://github.com/javisperez/vuelongpress

Confirmation button for sensitive action, which requires to be hold for an amount of seconds
https://github.com/javisperez/vuelongpress

button component confirmation longpress plugin vuejs

Last synced: 14 days ago
JSON representation

Confirmation button for sensitive action, which requires to be hold for an amount of seconds

• Host: GitHub
• URL: https://github.com/javisperez/vuelongpress
• Owner: javisperez
• License: mit
• Created: 2017-02-01T01:00:36.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-02-15T07:10:35.000Z (almost 6 years ago)
• Last Synced: 2024-10-13T21:55:11.252Z (about 1 month ago)
• Topics: button, component, confirmation, longpress, plugin, vuejs
• Language: Vue
• Homepage:
• Size: 22.5 KB
• Stars: 74
• Watchers: 2
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## VueLongpress

A VueJS (2.x) button component that requires you to keep pressing to confirm a given action.

## DEMO

[Live demo on jsFiddle](https://jsfiddle.net/qr9ykxpp/)

### 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:

```js

npm install vue-longpress --save

```

## Example

```js

import Longpress from 'vue-longpress';

var vm = new Vue({

	el: '#app',

	

	components: {Longpress},

    methods: {

        deleteUser() {

            // Delete the user login here

            console.log('user deleted');

        }

    },

	

	template: `


	    Click and hold to delete this user

	
`

});

```


### Options / Props

This component support five (5) props:

1. *on-confirm*: a callback function that will be called when the time has ellapsed (i.e. when the counter is 0)

2. *value*: a value that is passed as an argument to the confirmation function

3. *duration*: how long (_in seconds_) the user will need to keep pressing

4. *pressing-text*: the text to display while the user needs to "hold" the click (e.g. Keep pressing to confirm)

5. *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:

```js

```

In your method:

```js

doDelete() {

    // delete logic here

    ...

    // and now reset the button if needed

    this.$refs.deleteButton.reset();

}

```

### Labels templates

You can use these placeholders to display dynamic texts:

1. {$counter} - how much time (in seconds) has ellapsed (i.e. from 0 to {$duration})

2. {$rcounter} - how much time (in seconds) is remaining (i.e. from {$duration} to 0)

3. {$duration} - how much should the user press the button in total (in seconds)