更新记录

1.1.1(2020-05-30)

  1. 删除原 id 选择器,替换为 class 选择器。避免小程序平台不支持ID选择器的错误;
  2. 增加容错差值,减少验证错误的概率;

1.0.3(2019-10-17)

1、新增重置插件方法 reset(),可恢复插件初始的状态和次数; 2、修复点击插件时会增加校验次数的BUG;

1.0.2(2019-10-08)

1、@result 事件增加每次拖动回调,并有拖动次数统计。

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.9.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

move-verify 拖动滑块验证

使用方式:

script 中引用组件
import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue"
export default {
    components: {
        "move-verify":moveVerify
    },
    data() {
        return {
            resultData:{}
        }
    },
    methods: {
        /* 校验结果回调函数 */
        verifyResult(res){
            console.log(res);
            this.resultData = res;
        },
        /* 校验插件重置 */
        verifyReset(){
            this.$refs.verifyElement.reset();

            /* 删除当前页面的数据 */
            this.resultData = {};
        }
    }
}
template 中添加组件
<move-verify @result='verifyResult' ref="verifyElement"></move-verify>

事件说明:

事件名 类型 说明
@result Object 校验结果,具体请看结果参数说明

结果参数:

参数名 类型 说明
flag Boolean 校验标识,成功为 true 否则为 false
count Number 校验次数统计,方便需要统计次数做体验增强的需求

方法说明:

方法名 可传参数 说明
reset() 重置校验插件,恢复初始的状态和次数

友情提示:

  1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
  2. [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
  3. [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
  4. 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问