Easy Customizable Slide To Unlock Component For Vue 3

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.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