drag-verification-vue3
v1.1.1
Published
vue3拖动验证插件
Downloads
27
Readme
安装
// pnpm安装
pnpm add drag-verification-vue3
// npm安装
npm install drag-verification-vue3
1、基础用法
<!-- 必须设置父元素宽高;drag-verification-vue3会自适应 -->
<template>
<div class="wrap">
<DragVerification @parent='onParent' v-bind='propsData'/>
</div>
</template>
<script lang='ts' setup>
import DragVerification from 'drag-verification-vue3'
// 配置(可以不写),配置在下面
const propsData = {
...
}
const onParent = () => {
console.log('验证完成')
}
</script>
<style>
.wrap {
width: 300px;
height: 40px;
}
</style>
2、滑块插槽用法
<template>
<div class="wrap">
<DragVerification @parent='onParent'>
<template #default="{ isVerifyOk }">
<div class="process-c-w">
<span v-if="isVerifyOk" class="succees">√</span>
<img v-else class="right" src="https://aliyuncdn.antdv.com/vue.png">
</div>
</template>
</DragVerification>
</div>
</template>
<script lang='ts' setup>
import DragVerification from 'drag-verification-vue3'
const onParent = () => {
console.log('验证完成')
}
</script>
<style>
.wrap {
width: 300px;
height: 40px;
.process-c-w {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 60px;
height: 100%;
background: #ddd;
.right {
width: 30%;
}
.succees {
background: #7ac23b;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
}
}
}
</style>