yimijianfang / vue-drag-verify Goto Github PK

代码如下

 <DragVerify
      ref="dragVerify"
      :isPassing.sync="isPassing"
      :width="350"
      :radius="0"
      text="请按住滑块拖动"
      success-text="验证通过"
      handler-icon="ivu-icon ivu-icon-md-arrow-forward"
      success-icon="ivu-icon ivu-icon-ios-checkmark-circle"
  />

Dear
I got this error
main.vue?51a8:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
I did not understand your meaning of
[v-slot] <template #slot>
Is that for vue-drag-verify-img-chip
Could you please make a component example with all function for vue 3
thx

it is a very nice plug-in
I made an src in the static folder and an img subfolder and I uploaded some pictures but it does not work. Could you please explain more about :imgsrc="img" in dragVerifyImgChip.

自己用的时候发现 : 移动滑块时 脱离滑块区域就会重置. 这样导致我小心翼翼的拖动滑块才能验证通过，客户反馈体验感很不好

所以绑定在dom上的mousemove mouseup去掉换成了
document.getElementsByTagName('html')[0].addEventListener('mousemove', this.dragMoving)
document.getElementsByTagName('html')[0] .addEventListener('mouseup', this.dragFinish)

滑块可以滑出图片区域

快速滑动会出现，滑块未到显示验证成功
https://i.postimg.cc/qvM1NjJW/checker.jpg

请问是否可以新增验证失败事件？

不管是否import引入包，都报错，有使用的例子嘛？

验证不通过的黄色文字提示，能否提供参数修改颜色？

发现安卓手机自带的浏览器，使用图片滑块组件(拼图)和旋转图片滑块组件时存在兼容问题，滑动一小块距离就不能滑动了。

我在使用你的组件的时候可能碰到了一个组件冲突。
冲突组件：vuelidate(表单验证组件 )组件地址
本地组件名：drag-verify-img
在调用drag-verify-img中的reset方法时，vuelidate组件出现了this.$options为undefined错误，本地组件出问题的代码在
reImg: function() { this.$emit("update:isPassing", false); const oriData = this.$options.data(); for (const key in oriData) { if (oriData.hasOwnProperty(key)) { this.$set(this, key, oriData[key]); } } var handler = this.$refs.handler; var message = this.$refs.message; handler.style.left = "0"; this.$refs.progressBar.style.width = "0"; handler.children[0].className = this.handlerIcon; message.style["-webkit-text-fill-color"] = "transparent"; message.style.animation = "slidetounlock 3s infinite"; message.style.color = this.background; this.$refs.moveBar.style.left = "0px"; },
中，我分析后怀疑是for循环这一段
const oriData = this.$options.data(); for (const key in oriData) { if (oriData.hasOwnProperty(key)) { this.$set(this, key, oriData[key]); } }
出了问题，我现在强制修改了vuelidate的内容暂时是解决了问题。如果有兴趣可以试着修复一下问题，稍后我有时间会写一个可以复现这个问题的demo给你

我是先引入
npm i vue-drag-verify-img-chip -S
之后这样写：


运行之后直接报一堆selfHook.bind is not a function的错误？

使用 F5 不断刷新界面，会发现图片滑块组件的小拼图部分不显示或者显示不全

Is there any way to use SVG for handlerIcon, successIcon or refreshIcon. Because when i use tailwind css it is easier to use pure SVG.

我的步骤是:
1.import dragVerifyImgChip from 'vue-drag-verify-img-chip'
2. components: {dragVerifyImgChip},
3.使用组件
目前是只出现了如下这张图

然后拖不动滑块，是不是还需要引入css？全程没有报错

vue-drag-verify-img-chip 成功后出现这个问题

<el-dialog title="" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" custom-class="vueDragVerifyImgChipBox" > <VueDragVerifyImgChip v-if="dialogVisible" ref="vueDragVerifyImgChipRef" :imgsrc="localUrl" :isPassing.sync="isPassing" :showRefresh="true" :barWidth="40" :width="360" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" @passcallback="passcallback" > </VueDragVerifyImgChip> </el-dialog>

报错index.js?157d:1 Uncaught TypeError: Cannot read properties of undefined (reading 'style') at eval (index.js?157d:1:1)