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 = 0this.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.offsetYconsole.log( event.offsetX + ',' + event.offsetY);this.zuobiaoNum ++let BigBox = document.getElementById("BigBox");let addSpan = document.createElement("span");addSpan.innerText = this.zuobiaoNumaddSpan.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>

在这里插入图片描述