https://mp.weixin.qq.com/s/Bzy9iv4-CEpslwaLxggNzg
https://gitee.com/monoplasty/vue-monoplasty-slide-verify
vue-monoplasty-slide-verify 是一个基于 Vue 的滑块验证组件功能插件,提供了简洁的滑块验证功能,支持自定义样式和多种配置选项,帮助开发者轻松集成滑块验证到项目中。
图片
组件安装:
// npm
npm install vue-monoplasty-slide-verify --save
// import
import { createApp } from 'vue';
import App from './App.vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
const app = createApp(App);
app.use(SlideVerify);
app.mount('#app');
配置说明:
l:Number,滑块的长度。
r:Number,滑块圆角的半径。
w:Number,画布的宽度。
h:Number,画布的高度。
sliderText:String,滑块上的文字,默认值为 “Slide filled right”。
imgs:Array,背景图数组,默认值为 []。
accuracy:Number,滑动验证的误差范围,默认值为 5。
show:Boolean,是否显示刷新按钮,默认值为 true。
vue-monoplasty-slide-verify 事件
success:Function,验证成功时触发的回调函数,返回时间参数,单位为毫秒。
fail:Function,验证失败时触发的回调函数。
refresh:Function,点击刷新按钮后的回调函数。
again:Function,检测到非人为操作滑动时触发的回调函数。
fulfilled:Function,刷新成功之后的回调函数。
组件使用:
<template>
<slide-verify @success="onSuccess" @fail="onFail" />
</template>
<script>
import { SlideVerify } from'vue-monoplasty-slide-verify';
exportdefault {
components: {
SlideVerify
},
methods: {
onSuccess() {
console.log('验证成功');
},
onFail() {
console.log('验证失败');
}
}
};
</script>
功能和特性:
自定义样式:支持自定义样式,开发者可以根据项目需求调整滑块验证的外观。
多种配置:提供多种配置选项,如滑块的宽度、高度、背景颜色等。
事件支持:支持多种事件,如 onSuccess(验证成功时触发)和 onFail(验证失败时触发)。
易于集成:通过简单的安装和配置,即可快速集成到项目中。