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: '向右滑',
      // 精確度小，可允許的誤差范圍?。粸?時(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();
    },
  }
}

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