我要评论1、思路
1、在登录页面需要启动向右滑块验证
2、效果图
3、文章地址：
2、成分分析
1、由三块构成，分别是底部条、拖动条、拖动移动部分
2、底部条：整体容器，包括背景、边框和文字（请按住滑块，拖动到最右边）
3、拖动条：图片+边框+背景色即可
4、完成部分：背景、边框和文字（验证完成）
3、事件分析
1、鼠标按下事件：记录鼠标位置以及状态
2、鼠标移动事件：计算滑块位置
3、鼠标离开事件：更新状态至初始状态
4、鼠标抬起事件：更新状态至初始状态
4、效果图
5、代码
1、slideverify.vue文件
<template>
<div
ref="slidercontainer"
@mousemove="onmousemove"
@mouseup="onmouseup"
class="slider-verify-container"
@mouseleave="onmouseleave"
>
<span v-if="blockstate === 0">请按住滑块，拖动到最右边</span>
<div
@mousedown="onmousedown"
:style="{ left: leftp }"
class="slider-verify-block"
/>
<div :style="{ width: leftp }" class="slider-verify-complete">
<span v-if="blockstate === 2">验证成功</span>
</div>
</div>
</template>
<script setup>
import { ref, defineemits } from "vue";
const emit = defineemits(["success", "failed"]);
const leftp = ref("0");
const blockstate = ref(0);
const startp = ref(undefined);
const slidercontainer = ref(undefined);
const onmousedown = (e) => {
if (blockstate.value !== 2) {
leftp.value = "0";
blockstate.value = 1;
startp.value = {
clientx: e.clientx,
};
} else {
leftp.value = "0";
blockstate.value = 0;
}
};
const onmousemove = (e) => {
if (blockstate.value === 1) {
let width = e.clientx - startp.value.clientx;
if (width + 56 > 400) {
leftp.value = 400 - 56 + "px";
blockstate.value = 2;
emit("success");
} else {
leftp.value = width + "px";
}
}
};
const onmouseup = (e) => {
if (blockstate.value !== 2) {
leftp.value = "0";
blockstate.value = 0;
emit("failed");
}
};
const onmouseleave = (e) => {
if (blockstate.value !== 2) {
leftp.value = "0";
blockstate.value = 0;
emit("failed");
}
};
</script>
<style lang="scss" scoped>
.slider-verify-container {
width: 100%;
height: 56px;
background-color: transparent;
position: relative;
border: solid 1px #20cccf;
text-align: center;
color: #20cccf;
line-height: 56px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.slider-verify-complete {
width: 0;
height: 56px;
position: absolute;
background-color: #00e6f14f;
left: 0;
top: 0;
}
.slider-verify-block {
width: 56px;
height: 56px;
background-image: url("@/assets/images/login6/arrow.png");
background-color: white;
position: absolute;
left: 0;
top: -1px;
border: solid 1px #20cccf;
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
</style>2、调用代码
<slide-verify @success="onverifysuccess" @failed="onverifyfailed" />
到此这篇关于vue3滑动到最右验证功能的文章就介绍到这了,更多相关vue3滑动到最右验证内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论