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

“真誠服務(wù)，讓網(wǎng)絡(luò)創(chuàng)造價值”是我們的服務(wù)理念，創(chuàng)新互聯(lián)公司團(tuán)隊10年如一日始終堅持在網(wǎng)站建設(shè)領(lǐng)域,為客戶提供優(yōu)質(zhì)服。不管你處于什么行業(yè)，助你輕松跨入“互聯(lián)網(wǎng)+”時代，PC網(wǎng)站+手機(jī)網(wǎng)站+公眾號+重慶小程序開發(fā)。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式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
<slide-verify 
  ref="slideblock"
  @again="onAgain"
  @fulfilled="onFulfilled"
  @success="onSuccess"
  @fail="onFail"
  @refresh="onRefresh"
  :accuracy="accuracy"
  :slider-text="text"
></slide-verify>
<div>{{msg}}</div>

<button @click="handleClick">在父組件可以點我刷新哦</button>
// script
export default {
  name: 'App',
  data(){
    return {
      msg: '',
      text: '向右滑',
      // 精確度小，可允許的誤差范圍小；為1時，則表示滑塊要與凹槽完全重疊，才能驗證成功。默認(rèn)值為5
      accuracy: 1,
    }
  },
  methods: {
    onSuccess(){
      console.log('驗證通過');
      this.msg = 'login success'
    },
    onFail(){
      console.log('驗證不通過');
      this.msg = ''
    },
    onRefresh(){
      console.log('點擊了刷新小圖標(biāo)');
      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è)置

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

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

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

V1.1.0 版本新增屬性imgs：

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

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

• 詳情可參考APP.vue上的寫法。或在線查看demo地址

內(nèi)置方法

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

<slide-verify ref="slideblock" ></slide-verify>
// javascript 見使用方法
this.$refs.slideblock.reset();

props傳參（均為可選）

參數(shù)	類型	默認(rèn)值	描述	版本
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ù)組。可不傳	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é)習(xí)后，相信大家對Vue如何用插件實現(xiàn)滑動驗證碼這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

本文名稱：Vue如何用插件實現(xiàn)滑動驗證碼
網(wǎng)站鏈接：http://vcdvsql.cn/article0/gdgpoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站建設(shè)、服務(wù)器托管、小程序開發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)