vue2-slide-unlock v0.2.6

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:

Also, you can customize some styles via CSS Variables:

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()
    }
}