@j2only/slide-unlock v0.5.7

@j2only/slide-unlock

Vue.js slide to unlock component. Protect users from accidental clicks or protect your web app from bot attack. Written entirely on Vue 3 Composition API with Typescript and Vite. Coated with tests using Cypress. Compatible only with Vue.js 3.x.

You can check a DEMO HERE

Test coverage

Statements	Branches	Functions	Lines

Installation

Install this component via package manager:

yarn add @j2only/slide-unlock

or

npm install --save @j2only/slide-unlock

Usage

Import the component in your app and pass some settings:

<template>
    <slide-unlock
        ref="vueslideunlock"
        :auto-width="true"
        :circle="true"
        :width="400"
        :height="60"
        text="slide to unlock"
        success-text="success"
        name="slideunlock"
        @completed="complete()"
    />
</template>

<script>
import SlideUnlock from "@j2only/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:

Events

<template>
    <slide-unlock ... @completed="alert('Unlocked!')" />
</template>

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="vueSlideUnlockRef" />
</template>

And then you need to call the "reset" method

const vueSlideUnlockRef = ref()

const resetComponent = () => {
    vueSlideUnlockRef.value.reset()
}

Completed state

If you want to get the сompleted state of a component, you need to call the "complete" method

const unlockComponent = () => {
    vueSlideUnlockRef.value.complete()
}

Licensing

MIT License