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(验证失败时触发)。

易于集成:通过简单的安装和配置,即可快速集成到项目中。

文档更新时间: 2025-06-04 22:04   作者:admin