滑动验证

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

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