1、前言
本文基于vue-element-admin框架，登陆时加入滑块验证。
2、新建组件
在srccomponents新建SilderVerifyindex.vue文件
<template>
<div class="silder-range" :class="rangeStatus?'success':''">
<i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
{{rangeStatus?successText:startText}}
</div>
</template>
<script>
export default {
props: {
//成功图标
successIcon: {
type: String,
default: "el-icon-success"
},
//成功文字
successText: {
type: String,
default: "验证成功"
},
//开始的图标
startIcon: {
type: String,
default: "el-icon-d-arrow-right"
},
//开始的文字
startText: {
type: String,
default: "拖动滑块到最右侧"
}
},
name: "SilderVerify",
data() {
return {
rangeStatus:'',
};
},
methods: {
rangeMove(e){
let ele = e.target;
let startX = e.clientX;
let eleWidth = ele.offsetWidth;
let parentWidth = ele.parentElement.offsetWidth;
let MaxX = parentWidth - eleWidth;
if(this.rangeStatus){//不运行
return false;
}
document.onmousemove = (e) => {
let endX = e.clientX;
this.disX = endX - startX;
if(this.disX<=0){
this.disX = 0;
}
if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
this.disX = MaxX;
}
ele.style.transition = '.1s all';
ele.style.transform = 'translateX('+this.disX+'px)';
e.preventDefault();
}
document.onmouseup = ()=> {
if(this.disX !== MaxX){
ele.style.transition = '.5s all';
ele.style.transform = 'translateX(0)';
this.$emit("failed", this.rangeStatus);
}else{
this.rangeStatus = true;
this.$emit("success", this.rangeStatus);
}
document.onmousemove = null;
document.onmouseup = null;
}
}
}
};
</script>
<style scoped>
.silder-range{
background-color: #e3e4e6;
position: relative;
transition: 1s all;
user-select: none;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 45px; /*no*/
}
.silder-range i{
position: absolute;
left: 0;
60px;/*no*/
height: 100%;
color: #919191;
background-color: #fff;
border: 1px solid #bbb;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.silder-range.success{
background-color: #7AC23C;
color: #fff;
}
.silder-range.success i{
color: #7AC23C;
}
</style>
3、使用
在srcviewsloginindex.vue页面
3.1、引入组件
import SilderVerify from '@/components/SilderVerify'
components:{
SilderVerify
}
3.2、加表单验证
status: [{ validator: validatestatus, trigger: "change" }]
const validatestatus = (rule, value, callback)=> {
if (!value) {
callback(new Error('请拖动滑块完成验证'))
} else {
callback()
}
}
3.3、使用
密码框下方使用组件，success为成功后回调，failed为失败后回调
<el-form-item prop="status">
<silder-verify @success="handleSuccess" @failed="handleError"></silder-verify >
</el-form-item>
handleSuccess(){
this.loginForm.status = true
this.$refs.loginForm.validateField("status")
}
4、效果展示
本文参考：vue 实现滑块验证码，组件间传值方面略作修改
转载请注明出处，本文链接：