vue 验证码 图片点击

实现登陆验证 图片依次点击功能

demo ，上图可以根据demo修改，直接拿用

<template>
  <div>
    <div class="big-box" id="BigBox" :style="'background-image:url('+ imgCodeUrl +')'">
      <div class="click-box" @click="clickBox"></div>
    </div>
    <span @click="getCodeImage">换一换</span>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      rndNum: '', //随机数
      imgCodeUrl: '', //图片地址
      cssCode: '', //验证码样式
      isSubmit: true, //提交开关
      zuobiaoNum: 0, //点击数
      zuobiaoArr: [], //坐标数组
      tempElement:[] //记录追加标签，删除时使用
    }
  },
  mounted() {
    this.getCodeImage() //获取验证码
  },
  methods: {
    // 获取图片验证码
    getCodeImage() {
      this.zuobiaoNum = 0
      this.zuobiaoArr = []
      let BigBox = document.getElementById("BigBox");
      for (let i = 0; i < this.tempElement.length; i++) {
        BigBox.removeChild(this.tempElement[i]);
      }
      this.tempElement = []

      this.rndNum = this.getRndNum()
      this.imgCodeUrl = 'http://192.168.2.7:1100/api/vote/captcha.png.php?authType=5&rnd=' + this.rndNum
    },
    //获取随机数,
    getRndNum() {
      return Math.random()
        .toString()
        .split('.')[1]
    },
    clickBox(event){
      this.zuobiaoArr[this.zuobiaoNum] = event.offsetX + ',' + event.offsetY
      console.log( event.offsetX + ',' + event.offsetY);
      this.zuobiaoNum ++

      let BigBox = document.getElementById("BigBox");
      let addSpan = document.createElement("span");
      addSpan.innerText = this.zuobiaoNum
      addSpan.setAttribute('style', 'left: ' + event.offsetX + 'px; top:' + event.offsetY + 'px;')

      BigBox.appendChild(addSpan)
      this.tempElement.push(addSpan)

      if(this.zuobiaoNum == 4){
        let data = {
          authType: '5',
          rnd: this.rndNum,
          checkinfo: this.zuobiaoArr.join("-") + ';'+BigBox.offsetWidth+';'+ BigBox.offsetHeight  //坐标+图片尺寸
        }
        data = qs.stringify(data)
        this.$http.get('/api/vote/captcha.check.php?' + decodeURIComponent(data), {
          baseURL: 'http://192.168.2.7:1100',
        }).then((data) => {
          this.$toast.center(data.data.msg)
          this.getCodeImage()
        }).catch((err) => {
          this.$toast.center(err.data.msg)
          this.getCodeImage()
        })
      }
    }
  },
}
</script>

<style>
  .big-box{
    position: relative;
    width: 350px;
    height: 200px;
    background-size: 100% 100%;
    background: red;
  }

  span{
      position: absolute;
      width: 40px;
      height: 40px;
      line-height: 40px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      text-align: center;
      font-size: 20px;
      border-radius: 50%;
      z-index: 1;
      transform: translateX(-50%) translateY(-50%);
    }

  .click-box{
      width: 350px;
      height: 200px;
      position: absolute;
      z-index: 2;
    }
</style>