vue滑块验证(原创)

所属分类:输入-验证,拖和放

 23095  192  查看评论 (6)
分享到微信朋友圈
X
vue滑块验证(原创) ie兼容10

更新时间:2020-02-04 23:03:00

基于vue-drag-verify二次开发的vue组件

需对父元素或html设置user-select: none

使用方法

import dragVerify from 'dragVerify'
export default {
  name: 'app',
  components:{
    dragVerify
  }
}
<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
text初始文字string-swiping to the right side
successText成功提示文字string-success
background滑块右侧背景色string#eee / red / rgba(52,52,52,0.7)#eee
progressBarBg滑块左侧背景色string#76c61d / white / rgba(52,52,52,0.7)#76c61d
handlerBg滑块背景色string#fff / white / rgb(255,255,255)#fff
completedBg验证通过背景色string#76c61d / white / rgba(52,52,52,0.7)#76c61d
circle两侧是否圆形booleantrue / falsefalse
radius圆角string4px / 4%4px
handlerIcon滑块未验证通过时的图标,根据所选框架设置不同classstringel-icon-d-arrow-right-
successIcon滑块验证通过时的图标,根据所选框架设置不同classstringel-icon-circle-check-
textSize文字大小string14px / 4em14px
textColor文字颜色string#333 / gray / rgb(52,52,52)#333

Slots

textBefore提示文字前
textAfter提示文字后

方法

reset还原未验证通过时的状态-
相关插件-验证,拖和放

jQuery常用网站表单验证

可用于用户注册,网站留言等,有正在输入提示和失去焦点自动正则验证输入框内容
  验证
 37389  354

原生js表单验证(原创)

轻量级,原生js打造表单验证,易上手
  验证
 13707  187

JQuery表单验证插件EasyValidator,超级简单易用!

用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。
  验证
 51216  356

jQueryCSS3分步骤注册表单切换动画在线演示

jQueryCSS3分步骤注册表单切换动画在线演示
  验证
 43527  478

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    optimus 0
    2021/3/24 14:15:26
    立即查看出不来呀
        南洋大师傅0
        2021/3/24 15:20:47
        【website】可以查看
    回复
    焚音 0
    2021/1/5 14:01:25
    很好用,感谢分享 回复
    焚音 0
    2021/1/5 14:01:07
    很好用,感谢分享 回复
    Morning,? 0
    2020/4/15 17:27:48
    请问 有没有 源码~~
        南洋大师傅0
        2020/4/16 13:39:42
        【查看演示】右侧【website】是github地址
        ps:上传时是有vue文件的--.
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复