基于vue-drag-verify二次开发的vue组件 工作中需要用到vue滑动组件,在npm上找到一款vue-drag-verify,但是美观度不够。所以在其基础上增加了参数提高了交互效果,并根据日常需求封装了常用的四个组件: 滑块组件文档&演示地址 图片滑块组件文档&演示地址 图片滑块组件(拼图)文档&演示地址 旋转图片滑块组件文档&演示地址 ...
github地址:https://github.com/yimijianfang/vue-drag-verify 效果图1# 示例1# importdragVerifyfrom"vue-drag-verify2";<drag-verifyref="verify1":isPassing="isPassing1":width="400":height="50"text="拖拽验证"successText="验证成功"background="#ccc"progressBarBg="#76C61D"handlerBg="#edebe9"...
dragVerifyStyle: function() { return { width: this.width + "px", height: this.height + "px", lineHeight: this.height + "px", background: this.background, borderRadius: this.circle ? this.height / 2 + "px" : this.radius }; }, dragVerifyImgStyle: function() { return { width:...
基于vue-drag-verify二次开发的vue组件 需对父元素或html设置user-select: none demo 使用方法 引入升级包 a. 使用npm(暂不支持vue3) // 基本滑块验证组件 npm i vue-drag-verify2 -S // 图片滑块组件 npm i vue-drag-verify-img -S // 基本滑块验证组件(拼图) npm i vue-drag-verify-img-chip -...
vue-drag-verify 基于vue-drag-verify二次开发的vue滑块验证组件. Demo https://yimijianfang.github.io/vue-drag-verify/#/ Installation npm i vue-drag-verify2 -S Usage importdragVerifyfrom'vue-drag-verify2'components:{dragVerify}<drag-verifyref="dragVerify":isPassing.sync="isPassing"handlerIcon=...
这是一个基于vue2的验证组件--vue-drag-verify。用于登陆或者注册等。可以自定义背景色和字体以及形状等属性。 这里是Demo 安装 通过npm安装 {代码...} 插件...
A free, fast, and reliable CDN for vue-drag-verify2. 基于vue-drag-verify二次开发的vue滑块验证组件【支持vue3】
<drag-verify ref="dragVerify" :isPassing.sync="isPassing2" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" > </drag-verify> 属性 width宽度number-250 height高度number-40 ...
基于vue-drag-verify二次开发的vue组件 需对父元素或html设置user-select: none 使用方法 按需引入对应组件 1 2 3 4 5 6 7 8 9 10 11 // 基本滑块验证组件 import dragVerify from"@/components/core/dragVerify"; // 图片滑块组件 import dragVerifyImg from"@/components/core/dragVerifyImg"; ...
TypeError: Cannot read properties of undefined (reading '_c')在引入时加上“/src”：import dragVerify from "vue-drag-verify"; 改成 import dragVerify from "vue-drag-verify/src";