vue滑块验证插件使用及原生js模拟点击事件

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

main.js引入

/ main.js
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

html

<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            :slider-text="text"
            >
</slide-verify>

js

export default {
    data(){
        return {
            text: '向右滑',
        }
    },
    methods: {
        onSuccess(){
        	console.log('验证成功')；
        },
        onFail(){
        },
        onRefresh(){
        }
    }
}

原生js模拟点击事件

通过点击一个按钮，自动触发另一个按钮的点击事件

<button id="btn-1">Button-1</button>
<button id="btn-2">Button-2</button>
<script>
    // 假如想通过点击 Button-1 触发 Button-2 的某个事件
    let btn_1 = document.getElementById('btn-1');
    let btn_2 = document.getElementById('btn-2');
    btn_1.onclick = function () {
        var myEvent = new Event('click');
        btn_2.dispatchEvent(myEvent);
    }
    btn_2.onclick = function () {
        alert('OK')；
    }
</script>

登录页代码

<template>
  <div class="login">
    <h3>欢迎登录西藏锦绣</h3>
    <ul class="msg">
      <li class="flex">
        <input v-model="tel" type="text" placeholder="请输入手机号码(+86)" />
      </li>
      <li class="flex">
        <input v-model="code" class="solo" type="text" placeholder="请输入验证码" />
        <p @click="getCode">{{timeover?'获取验证码':`${time}s重新获取`}}</p>
      </li>
      <button @click="login">登录</button>
    </ul>
    <div class="msk" v-show="showSlide"></div>
    <slide-verify
      v-show="showSlide"
      :l="42"
      :r="10"
      :w="310"
      :h="155"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :slider-text="text"
    ></slide-verify>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      text: "向右滑",
      tel: "",
      code: "",
      flag: false, //登录按钮是否激活
      showSlide: false, //是否显示验证块
      time: 8, //倒计时
      timeover: true //倒计时是否结束
    };
  },
  methods: {
    onSuccess() {
      this.timeover = false;
      this.showSlide = false;
      //   倒计时
      let timerId = setInterval(() => {
        this.time -= 1;
        if (this.time <= 0) {
          clearInterval(timerId);
          this.timeover = true;
          this.time = 8;
        }
      }, 1000);
    },
    onFail() {
      this.msg = "";
    },
    onRefresh() {
      this.msg = "";
    },
    // 点击获取验证码
    getCode() {
      if (!this.timeover) {
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(this.tel)) {
        this.$toast("请输入正确的手机号");
        return false;
      } else {
        this.showSlide = true;
        // 通过点击获取验证码按钮自动触发滑块验证的刷新按钮
        let butn = document.querySelector(".slide-verify-refresh-icon");
        var myEvent = new Event("click");
        butn.dispatchEvent(myEvent);
      }
    },
    // 点击登录
    login() {
      if (!/^1[3456789]\d{9}$/.test(this.tel)) {
        this.$toast("请输入正确的手机号");
        return false;
      } else if (this.code.length != 4) {
        this.$toast("请输入正确的验证码");
        return false;
      } else {
        //   调取登录接口
      }
    }
  },
  mounted() {
    let butn = document.querySelector(".slide-verify-refresh-icon");
    butn.onclick = function() {
      // 没有打印，是因为模拟点击刷新按钮，那个按钮原本绑定了一个refresh事件，覆盖了这个事件
      console.log(333333333333);
    };
  }
};
</script>
<style lang="less" scoped>
.login {
  padding: 300px 100px;
  color: rgba(51, 51, 51, 1);
  min-height: 100vh;
  h3 {
    font-size: 48px;
    font-weight: 400;
  }
  .msg {
    margin: 55px 0 75px;
    li {
      height: 135px;
      padding-top: 35px;
      border-bottom: 1px solid #eeeeee;
      input {
        width: 100%;
        &.solo {
          width: 70%;
        }
      }
      p {
        width: 173px;
        padding: 6px 0;
        border: 1px solid rgba(153, 153, 153, 1);
        border-radius: 24px;
        font-size: 24px;
        color: rgba(153, 153, 153, 1);
        text-align: center;
      }
    }
    button {
      width: 100%;
      height: 88px;
      background: rgba(70, 159, 241, 1);
      border-radius: 24px;
      font-size: 34px;
      color: rgba(255, 255, 255, 1);
      margin-top: 90px;
    }
  }
  .slide-verify {
    position: fixed;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -70%);
  }
  .msk {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
  }
}
</style>