vue圖片滑動驗證(原創)

所屬分類:輸入-驗證

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

更新時間:2020-05-14 21:23:31

更新說明:新增圖片拼圖驗證功能


基于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>

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

相關插件-驗證

jQuery微信開放平臺注冊表單

jQuery微信開放平臺注冊表單是一款仿微信開放平臺的選項卡帶步驟的注冊表單驗證jQuery代碼。
  驗證
 38535  308

Modern Fms 表單驗證插件

Modern Fms(精美的純css3 html5表單框架) 表單驗證插件
  驗證
 3466  29

大氣簡潔的登錄注冊特效

大氣簡潔的登錄注冊特效帶注冊驗證
  驗證
 51604  452

jQuery驗證插件check.js

不提供任何提示,僅提供配置的接口,通過回調的方式來進行
  驗證
 16243  133

討論這個項目(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篮球 河北11选5技巧稳赚 pk10开奖记录 网上买时时彩票可靠吗 配资网站 甘肃十一选五最新结果 赌博连赢一个月 江西多乐彩11选五走势图 上海11选五走势图一牛 河北快3和值遗漏值尾走势图 赚钱小项目适合女生的 黑龙江体彩11选5开奖结 贵州茅台股票分析实验报告 辽宁快乐12遗漏数据查询 湖北11选5任3基本玩法 江苏十一选五遗漏选号法 秒速赛车人工计划在线