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

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

vue是什么軟件

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

目錄

• 預(yù)覽

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

• 安裝

• 更新記錄

• 內(nèi)置方法

• props傳參（均為可選）

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

• V1.1.2 版本

• V1.1.1 描述（此版本有bug,請(qǐng)使用最新版）

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

• 使用方法

• 注意事項(xiàng)

預(yù)覽

基于滑動(dòng)式的驗(yàn)證碼，免于字母驗(yàn)證碼的繁瑣輸入 用于網(wǎng)頁(yè)注冊(cè)或者登錄

目前僅前端實(shí)現(xiàn)，支持移動(dòng)端滑動(dòng)事件。版本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">在父組件可以點(diǎn)我刷新哦</button>
// script
export default {
  name: 'App',
  data(){
    return {
      msg: '',
      text: '向右滑',
      // 精確度小，可允許的誤差范圍小；為1時(shí)，則表示滑塊要與凹槽完全重疊，才能驗(yàn)證成功。默認(rèn)值為5
      accuracy: 1,
    }
  },
  methods: {
    onSuccess(){
      console.log('驗(yàn)證通過(guò)');
      this.msg = 'login success'
    },
    onFail(){
      console.log('驗(yàn)證不通過(guò)');
      this.msg = ''
    },
    onRefresh(){
      console.log('點(diǎn)擊了刷新小圖標(biāo)');
      this.msg = ''
    },
    onFulfilled() {
      console.log('刷新成功啦！');
    },
    onAgain() {
      console.log('檢測(cè)到非人為操作的哦！');
      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,請(qǐng)使用最新版）

• accuracy 精度設(shè)置

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

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

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

V1.1.0 版本新增屬性imgs：

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

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

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

內(nèi)置方法

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

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

props傳參（均為可選）

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

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

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

注意事項(xiàng)

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

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

本文名稱(chēng)：Vue如何用插件實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼
網(wǎng)站鏈接：http://jinyejixie.com/article0/gdgpoo.html

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

廣告

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