基于vue-drag-verify二次开发的vue组件
需对父元素或html设置user-select: none
使用方法
引入升级包
a. 使用npm(推荐)
// 基本滑块验证组件
npm i vue-drag-verify2 -S
// 图片滑块组件
npm i vue-drag-verify-img -S
// 基本滑块验证组件(拼图)
npm i vue-drag-verify-img-chip -S
// 旋转图片滑块组件
npm i vue-drag-verify-img-rotate -S
b. 按需引入对应组件(适合二次开发)
// 基本滑块验证组件
import dragVerify from "@/components/dragVerify";
// 图片滑块组件
import dragVerifyImg from "@/components/dragVerifyImg";
// 图片滑块组件(拼图)
import dragVerifyImgChip from "@/components/dragVerifyImgChip";
// 旋转图片滑块组件
import dragVerifyImgRotate from "@/components/dragVerifyImgRotate";
components{
dragVerify,
dragVerifyImg,
dragVerifyImgChip,
dragVerifyImgRotate
}
引入以下代码
<