An easy and customizable slide to unlock component that can be used to protect users from accidental clicks or protect your web app from bot attacks by requiring the user to slide a button before completing an action.
How to use it:
1. Install and import the SlideUnlock component.
import SlideUnlock from "vue-slide-unlock"
export default { components: { SlideUnlock } }
2. Add the component to the template.
<slide-unlock @completed="complete()" />
3. Available props to customize the slide to unlock component.
autoWidth: { type: Boolean, default: true }, width: { type: Number, default: 400 }, height: { type: Number, default: 60 }, text: { type: String, default: "slide to unlock" }, successText: { type: String, default: "success" }, circle: { type: Boolean, default: true }, disabled: { type: Boolean, default: false }, noanimate: { type: Boolean, default: false }
4. Reset the state.
this.$refs.vueslideunlock.reset()
Preview:
Changelog:
v0.4.8 (10/19/2023)
- update dependencies
v0.4.6 (07/11/2023)
- Added the ability to call the completed state
- Added additional tests for 100% test coverage
- Dependencies and security updates
v0.4.4 (06/13/2023)
- Update
v0.4.2 (03/24/2023)
- Fixed a bug when using multiple instances of components on the same page
v0.4.1 (03/11/2023)
- Update
v0.4.0 (02/22/2023)
- Fixed some bugs with touch events in Firefox
Download Details:
Author: joseph2
Live Demo: https://joseph2.github.io/vue-slide-unlock/
Download Link: https://github.com/joseph2/vue-slide-unlock/archive/refs/heads/main.zip
Official Website: https://github.com/joseph2/vue-slide-unlock
Install & Download:
# NPM
$ npm i vue-slide-unlock