使用vue-monoplasty-slide-verify插件实现滑块验证码

第一步：安装插件

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

第二步：在main.js中引用组件

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify); 

第三步：在template使用组件

<div class="content-box">
      <div class="verify-box">
        <slide-verify
          ref="slideRef"
          :l="42"
          :r="10"
          :w="280"
          :h="200"
          :imgs="images"
          slider-text="向右滑动"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          @fulfilled="onRefreshComplete"
          @again="onAgain"
        >
        </slide-verify>
      </div>
      <div class="tips" :class="isSuccess ? '' : 'red'">{{ tipsMsg }}</div>
  </div>

第四步：data数据层和methods

export default {
    data() {
        return {
            images: [
                require('../assets/1.jpg'),
                require('../assets/2.jpg'),
                require('../assets/3.jpg')
            ],
            tipsMsg:'',
            isSuccess: true,
        }
    },
    methods: {
         // 成功回调
        onSuccess(){
            this.tipsMsg = '恭喜您，验证成功啦！';
            this.isSuccess = true;
        },
        // 失败回调
        onFail(){
            this.tipsMsg = '验证失败，请重试哦！';
            this.isSuccess = false;
        },
        // 点击刷新回调
        onRefresh(){
            this.tipsMsg = ''
        },
        // 刷新成功后回调
        onRefreshComplete(){
        this.tipsMsg = ''
        this.isSuccess = true;
        },
        // 检测到非人为操作
        onAgain() {
        this.tipsMsg = "再试一次吧～"
        this.$refs.slideRef.reset();
        }
    }
}

滑快验证的属性：

滑块验证的回调函数：