vue2-slide-unlock
Disclaimer
The original project is here: https://github.com/chenbimo/vue-slide-unlock
This project has the same component, but is configured to work with Vue 2
vue-slide-unlock
Vue.js 3.x slide to unlock component. Protect users from accidental clicks or protect your web app from bot attack.
You can check a DEMO HERE
Installation
You can install this component via npm:
npm install --save vue-slide-unlock
Usage
Import the component in your app and pass some settings:
<template>
<slide-unlock
ref="vueslideunlock"
:auto-width="true"
:circle="true"
:disabled="false"
:noanimate="false"
:width="400"
:height="60"
text="slide to unlock"
success-text="success"
@completed="complete()"
/>
</template>
<script>
import SlideUnlock from "vue-slide-unlock"
export default {
components: {
SlideUnlock
}
}
</script>
As you can see, the component accepts some props:
Prop | Type | Default | Description |
---|---|---|---|
autoWidth | Boolean | true | Auto width for component |
circle | Boolean | true | All parts of component will be with border-raduis and rounded handler |
disabled | Boolean | false | Disable interaction with component |
noanimate | Boolean | false | Disable css animations (but not css transitions) |
width | Number | 400 | Width of element (ignored if autoWidth is true) |
height | Number | 60 | Height of element |
text | String | slide to unlock | Text on element |
successText | String | success | Text on element when slide is completed |
Also, you can customize some styles via CSS Variables:
Variable | Default | Description |
---|---|---|
--su-size-text | 24px | Font size of text on element |
--su-size-padding | 6px | Padding on element from progressbar |
--su-color-bg | #ebebeb | Background color of element. |
--su-color-progress-normal-bg | #cacaca | Color of progressbar |
--su-color-progress-complete-bg | #42b983 | Color of progressbar when slide is completed |
--su-color-text-normal | #4F4F4F | Color of text on element |
--su-color-text-complete | #FEFEFE | Color of text on element when slide is completed |
--su-color-handler-bg | #FFFFFF | Color of handler |
Event
this.$emit("completed")
Emitted when pass verify, the handler swiped to the right side.
Reset state
If you want to reset the state of a component, you need to assign a ref to the component
<template>
<slide-unlock ref="vueslideunlock" />
</template>
And then you need to call the reset method
methods: {
reset() {
this.$refs.vueslideunlock.reset()
}
}