vue2的登录界面防抖验证(滑快验证)

1.安装插件

yarn add vue-monoplasty-slide-verify -D

2.引入(main.js中)

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

3.使用(在需要的地方直接使用)

 <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
 </el-form-item>

 <slide-verify v-show="show" :l="42" :r="10" :w="310" :h="157" ref="slideblock" 
 slider-text="向右滑动" @success="onSuccess"></slide-verify>

data(){
    return{
      show: false, //滑块验证   

         ruleForm: {
        account: "",
        password: "",
      },
    }
}

//滑快实际使用
  methods: {
    // 滑块验证
    async onSuccess() {
      this.$refs.ruleForm.validate(async (result) => {
        if (result) {
          let res = await checkLogin(this.ruleForm);
          // console.log(res);

          if (res.data.code === 0) {
            //存储token
            local.set("token", res.data.token);
            // 存储个人身份
            local.set("role", res.data.role);

            console.log(res.data.role);
            //跳转到首页
            this.$router.push("/index");
            // //刷新一次，重新加载路由
            // window.location.reload();
          } else {
            //错误(错误提示)
            this.myverify = false;
            this.$refs.slideblock.reset();
          }
        }
      });
    },
    // 登录按钮
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.show = true;
        }
      });
    },
  },
};