在开发用户模块的时候，相信大家都碰到过一个功能，图片滑动解锁后发送验证码，这里分享我用uni-app制作的一个小控件

效果如下：

需要如下图片资源

template

script

style

调用方法

引入控件

import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue"

view里加上

@result='verifyResult' ref="verifyElement">

components加上

components: {
　　"tfgg-verify": tfggVerify
},

方法案例

/* 校验结果回调函数 */
verifyResult(res) {
if (res) {
this.$refs.verifyElement.reset(); //校验成功重置插件
console.log('验证成功')
}
console.log(res);
},
/* 显示校验弹窗 */
verifyFasong() {
this.$refs.verifyElement.show();
},
/* 校验插件重置 */
verifyReset() {
this.$refs.verifyElement.reset();
},

如果本文章对你有帮助，请点个推荐，欢迎关注我，我会定期更新或分享开发中碰到的问题及解决方法，希望与你共同进步(*^▽^*)。