Vue 滑动验证码组件 前端

Verify.Vue

<template>
<div :style="{width: `${o.background.x}px`}" v-show="show">
<div class="tips" :data-placeholder="placeholder || '向右拖动滑块填充拼图'" >
<div class="imgs" :style="{width: `${o.background.x}px`,height: `${o.background.y}px`,}">
<div style="position: absolute; background-size: 100% 100%" :style="{width: `${o.background.x}px`,height: `${o.background.y}px`,background: `url(${o.background.url})`,}"></div>
<div style="z-index: 2;position: absolute;background-size: 100% 100%;":style="{left: `${x}px`,width: `${o.slide.x}px`,height: `${o.slide.y}px`,background: `url(${o.slide.url})`,}"></div>
</div>

<div class="trail" :style="{ width: `${x}px` }"></div>
<div class="drag":style="{left: `${x}px`,}" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup">
<svg t="1628649273861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1192">
<path d="M837.9904 570.0608H124.5696a29.0304 29.0304 0 0 1-29.0304-29.0304V482.9696a29.0304 29.0304 0 0 1 29.0304-29.0304h713.4208z" fill="#2C2C2C" p-id="1193"></path>
<path d="M561.3056 808.96l-40.96-40.96a28.928 28.928 0 0 1 0-40.96l215.04-215.04-215.04-215.04a28.9792 28.9792 0 0 1 0-40.96l40.96-40.96a28.9792 28.9792 0 0 1 40.96 0l296.96 296.96-296.96 296.96a28.9792 28.9792 0 0 1-40.96 0z" fill="#2C2C2C" p-id="1194"></path>
</svg>
</div>
</div>
</div>

</template>

<script>

//这个是axios 可以用默认
import axios from "axios";

export default {
name: "Verify",
props: { placeholder: String },
data() {
    return {
        flag: false,
        o: { background: {}, slide: {} },
        x: 0,
        offset: 0,
        down: false,
        show: false,
    };
},
mounted() {
    this.flag = true;
    axios({
        url: "http://192.168.1.19:8001/get",
        data: {},
    }).then((response) => {
        console.log(response.data);
        this.o = response.data.data;
        this.show = true;
        console.log("---", this.o);
    });
    this.x = 0;
    this.offset = 0;
    this.down = false;
},
methods: {
mousedown(event) {
    const that = this;
    that.down = true;
    that.offset = event.x - that.x;
    event = event || window.event;
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
    document.onmousemove = function (ev) {
        event = ev || window.event;
        if (that.down) {
            that.x = Math.min(
            Math.max(0, event.x - that.offset),
            that.o.background.x - that.o.slide.x);

        }
    };
},
mouseup(e) {
    if (this.down) {
        document.onmousemove = null;
        this.down = false;
        axios
        .post("http://192.168.1.19:8001/verify", {
            id: this.o.id,
            x: this.x,
        })
        .then((res) => {
            console.log(res);
            if (res.data.data) {
            this.flag = false;
            console.log("验证成功");
            } else {
            console.log("验证失败");
            this.x = 0;
            }
        });
        }
    },
},
};
</script>

<style lang="less" scope>
.tips {
height: 37px;
position: relative;
z-index: 10;
box-sizing: border-box;
.imgs {
opacity: 0;
z-index: 1;
position: absolute;
bottom: 35px;
left: 0;
transition: 0.5s;
}
&:hover {
.imgs {
opacity: 1;
padding-bottom: 20px;
}
}
&::before {
position: relative;
z-index: 10;
box-sizing: border-box;
line-height: 35px;
display: inline-block;
width: 100%;
border: 1px solid #333;
content: attr(data-placeholder);
}
.trail {
position: absolute;
z-index: 10;
height: 100%;
top: 1px;
left: 1px;
background: #f00;
}
.drag {
box-sizing: border-box;
position: absolute;
z-index: 10;
top: 0;
width: 37px;
height: 37px;
border: 1px solid #000;
text-align: center;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
svg {
width: 1.5em;
height: 1.5em;
line-height: 35px;
display: inline-block;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
}
}

</style>