Home
Other
Easy Customizable Slide To Unlock Component For Vue 3

Easy Customizable Slide To Unlock Component For Vue 3

joseph2 Last Updated: 2 months ago

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:

Easy Customizable Slide To Unlock Component For Vue 3

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

Related Posts

Add Comment