vue圖片滑動驗證(原創)

所屬分類:輸入-驗證

 1382  16  查看評論 (3)
分享到微信朋友圈
X
vue圖片滑動驗證(原創) ie兼容11

基于vue-drag-verify二次開發的vue組件

需對父元素或html設置user-select: none

使用方法

按需引入對應組件

// 基本滑塊驗證組件
import dragVerify from "@/components/core/dragVerify";
// 圖片滑塊組件
import dragVerifyImg from "@/components/core/dragVerifyImg";
// 旋轉圖片滑塊組件
import dragVerifyImgRotate from "@/components/core/dragVerifyImgRotate";
components{
   dragVerify,
   dragVerifyImg,
   dragVerifyImgRotate
}

引入以下代碼

1.png

<drag-verify
  ref="dragVerify"
  :isPassing.sync="isPassing2"
  text="請按住滑塊拖動"
  successText="驗證通過"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  >
</drag-verify>

2.png

<drag-verify-img 
  ref="sss"
  :imgsrc="t3"
  :isPassing.sync="isPassing"
  :showRefresh="true"
  text="請按住滑塊拖動"
  successText="驗證通過"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  @refresh="reimg"
  @passcallback="pass"
  >
</drag-verify-img>

3.png

<drag-verify-img-rotate 
  ref="sss"
  :imgsrc="logo"  
  :isPassing.sync="isPassing"
  :showTips="true"
  text="請按住滑塊拖動"
  successText="驗證通過"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  @refresh="reimg"
  >
</drag-verify-img-rotate>

有需求可以在評論里提出來

相關插件-驗證

js滑塊驗證插件slideHuaKuai.js

js滑塊驗證插件slideHuaKuai.js,簡單使用注釋全。
  驗證
 3354  37

原生js驗證碼

原生js驗證碼彩色點線干擾
  驗證
 11459  136

jQuery表單提交驗證verify

一整套注冊驗證,可直接用于實際項目中
  驗證
 82928  1181

jQuery滑動拼圖驗證插件SliderImgPuzzle(原創)

仿造網絡上的類似的拼圖控件,還有結合自己的項目封裝的
  驗證
 29488  201

討論這個項目(3)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

    yumingming123 0
    2020/4/27 15:11:07
    請問滑塊上面的圖片拿去了
        南洋大師傅0
        2020/4/27 16:08:30
        去github下載吧,太小的圖片打包后轉base64了
        南洋大師傅1
        2020/4/27 22:11:00
        sorry,答非所問。滑塊上的圖標可自己定義class:handlerIcon和successIcon。
    回復
取消回復
nba直播吧cctv5篮球 湖南快乐十分开奖结果表 赌场最常用的扑克玩法 山东十一选五走势图360 疫情期间村主任赌博 福建十一选五怎么玩 股票行情 什么可以才能了解腾讯分分彩 双色球下载安装2020 短期理财 酒吧5个骰子玩法及讲解 双色球作弊铁证如山 北京快3走势图表基本走势图 腾讯分分彩如何玩后二组选 金财期货配资网 四川金七乐手机版专家 今天上证综合指数