JS 滑塊驗證

完成效果：

 

先安裝

 

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

　　

main 掛載

// 滑塊驗證
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

　　

應用：

template 的 div

<slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :accuracy="accuracy" :slider-text="text" ></slide-verify>

　　

data 定義

      text: '向右滑',
      // 精確度小，可允許的誤差范圍小；為1時，則表示滑塊要與凹槽完全重疊，才能驗證成功。默認值為5
      accuracy: 3,

　　

methods : 方法

//驗證通過提示

    onSuccess(times){

      this.$message.error("驗證通過")

    },

    //驗證不通過提示

    onFail(){

      this.$message.error("驗證不通過")

    },

    //點擊了刷新的小圖片，可以自行清空相關內容

    onRefresh(){

      this.$refs.slideblock.reset(); // 例如說 刷新圖案

      // this.msg = ''

    },

    //刷新成功提示

    onFulfilled() {

      this.$message.success('刷新成功啦！')

    },

    //機器人提示 / 軟件自動跑

    onAgain() {

      this.$message.error('檢測到非人為操作的哦！')

      // 刷新

      this.$refs.slideblock.reset();

    },