Vue如何用插件實現(xiàn)滑動驗證碼-創(chuàng)新互聯(lián)

這篇文章主要講解了“Vue如何用插件實現(xiàn)滑動驗證碼”，文中的講解內(nèi)容簡單清晰，易于學(xué)習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習“Vue如何用插件實現(xiàn)滑動驗證碼”吧！

成都創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有十余年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，成百上千客戶的共同信賴。提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)站定制、賣鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計師打造企業(yè)風格，提供周到的售前咨詢和貼心的售后服務(wù)vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

目錄

• 預(yù)覽

• 基于滑動式的驗證碼，免于字母驗證碼的繁瑣輸入 用于網(wǎng)頁注冊或者登錄

• 安裝

• 更新記錄

• 內(nèi)置方法

• props傳參（均為可選）

• 自定義回調(diào)函數(shù)

• V1.1.2 版本

• V1.1.1 描述（此版本有bug,請使用最新版）

• V1.1.0 版本新增屬性`imgs`：

• 使用方法

• 注意事項

預(yù)覽基于滑動式的驗證碼，免于字母驗證碼的繁瑣輸入 用于網(wǎng)頁注冊或者登錄

目前僅前端實現(xiàn)，支持移動端滑動事件。版本V1.1.2

github文檔地址： https://github.com/monoplasty/vue-monoplasty-slide-verify
gitee鏡像地址：https://gitee.com/monoplasty/vue-monoplasty-slide-verify

安裝

npm install --save vue-monoplasty-slide-verify

使用方法

// main.js
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);
// template

{{msg}}

在父組件可以點我刷新哦
// script
export default {
  name: 'App',
  data(){
    return {
      msg: '',
      text: '向右滑',
      // 精確度小，可允許的誤差范圍小；為1時，則表示滑塊要與凹槽完全重疊，才能驗證成功。默認值為5
      accuracy: 1,
    }
  },
  methods: {
    onSuccess(){
      console.log('驗證通過');
      this.msg = 'login success'
    },
    onFail(){
      console.log('驗證不通過');
      this.msg = ''
    },
    onRefresh(){
      console.log('點擊了刷新小圖標');
      this.msg = ''
    },
    onFulfilled() {
      console.log('刷新成功啦！');
    },
    onAgain() {
      console.log('檢測到非人為操作的哦！');
      this.msg = 'try again';
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick() {
    	// 父組件直接可以調(diào)用刷新方法
      this.$refs.slideblock.reset();
    },
  }
}

更新記錄V1.1.2 版本

• 修復(fù)imgs 參數(shù)不傳是的warn

V1.1.1 描述（此版本有bug,請使用最新版）

• accuracy 精度設(shè)置

判斷滑塊與凹槽位置的誤差范圍值，默認取值范圍為 [1, 10]。若取值不為 -1，則會開啟檢測非人為操作。人為操作也有可能會觸發(fā)哦！

判斷依據(jù)是：滑塊的一系列移動坐標的平均值和方差是否相等。若相等則人為是非人為操作。

若accuracy為 -1，則表示關(guān)閉檢測非人為操作，默認開啟。開啟之后，若檢測到為非人為操作，則會觸發(fā) again 回調(diào)函數(shù)

V1.1.0 版本新增屬性imgs：

• 當imgs不傳或者傳空數(shù)組時，圖片庫默認使用第三方api提供的圖片路徑。可能加載緩慢；

• 當imgs傳本地路徑時，確保圖片路徑是否正確。建設(shè)傳cdn上的圖片地址。

• 詳情可參考APP.vue上的寫法?；蛟诰€查看demo地址

內(nèi)置方法

• 在父組件里如果需要重置，可以在父組件中調(diào)用子組件reset() 方法

// javascript 見使用方法
this.$refs.slideblock.reset();

props傳參（均為可選）

參數(shù)	類型	默認值	描述	版本
l	Number	42	滑塊的邊長
r	Number	10	滑塊突出圓的半徑
w	Number	310	canvas畫布的寬
h	Number	155	canvas畫布的高
sliderText	String	Slide filled right	滑塊底紋文字	1.0.5
imgs	Array	[]	背景圖數(shù)組?？刹粋?/td>	1.1.0
accuracy	Number	5	滑動驗證的誤差范圍	1.1.2
show	Boolean	true	是否顯示刷新按鈕	1.1.2

自定義回調(diào)函數(shù)

事件名	類型	描述	版本
success	Function	驗證碼匹配成功的回調(diào)
fail	Function	驗證碼未匹配的回調(diào)
refresh	Function	點擊刷新按鈕后的回調(diào)函數(shù)
again	Function	檢測到非人為操作滑動時觸發(fā)的回調(diào)函數(shù)	1.1.2
fulfilled	Function	刷新成功之后的回調(diào)函數(shù)	1.1.2

注意事項

目前僅是前端實現(xiàn)

感謝各位的閱讀，以上就是“Vue如何用插件實現(xiàn)滑動驗證碼”的內(nèi)容了，經(jīng)過本文的學(xué)習后，相信大家對Vue如何用插件實現(xiàn)滑動驗證碼這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

分享文章：Vue如何用插件實現(xiàn)滑動驗證碼-創(chuàng)新互聯(lián)
當前地址：http://m.jiaotiyi.com/article/iochi.html