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();

    },