Vue+Element-Ui⼿写登录滑动验证码
1.vue模块采⽤el-dialog样式做修改
<!-- 滑动验证码模块 -->
<el-dialog :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgCode.dialogVisible" width="450px" top="25vh">        <div slot="title">
<span class="dialog-title">请滑动验证码进⾏验证</span>
<span >
<el-button icon="el-icon-refresh" title="刷新验证码" circle type="success" @click="getImg" />
<el-button icon="el-icon-close" title="关闭验证" circle type="danger" @click="closeDialog" />
</span>
</div>
<div >
<img ref="bgImg" :src="imgCode.bigImg" alt="" class="bigImg">
<img
ref="sliderImg"
:src="imgCode.smallImg"
alt=""
class="smallImg"
:
@mousedown="(e)=>moveBtn(e,2)"
>
</div>
<div slot="footer" class="dialog-footer">
<div class="slider-box">
<span class="slider-text">向右滑动滑块填充拼图</span>
<button ref="btnImg" class="slider-icon" @mousedown="(e)=>moveBtn(e,1)">>></button>
</div>
</div>
</el-dialog>
2.样式部分scss代码
  1.弹窗⾃定义部分以及图⽚样式
.el-dialog__body {
padding: 10px 5px !important;
.bigImg{
width: 439px;
height: 280px;
border-radius: 5px;
}
.smallImg{
width: 60px;
height: 60px;
position: absolute;
//top: 38%;
left: 1%;
border-radius: 2px;
/
/  box-shadow: 5px 5px 10px #696969;
//  border:1px solid #ccc;
cursor: pointer;
}
}
.el-button--small.is-circle {
padding: 5px;
}
.dialog-title {
font-size: 15px;
color:#2b3f57;
text-align: left;
font-weight: 600;
}
.el-dialog__footer {
padding: 0px 12px 14px 0px !important;
}
.el-dialog__headerbtn {
top: 15px !important;
}
.el-dialog__header {
padding-bottom: 5px;
element表格横向滚动条
}
  2.滑块样式
.slider-box {
background: #f7f9fa;
color: $light_gray;
border: 1px solid #e4e7eb;
position: relative;
height: 45px;
width: 100%;
margin:0 0 0 6px;
border-radius: 5px;
&:hover {
box-shadow: 0 0 2px $btnHover;
}
.slider-text {
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slider-icon {
position: relative;
top:0;
left:0;
width: 54px;
height: 44px;
line-height: 25px;
background: $btn;
text-align: center;
font-size: 17px;
color: #fff;
cursor: pointer;
outline: none;
border: 1px solid $btn;
float: left;
border-radius: 5px;
}
}
　3.vue-js滑动相关代码
// 滑动滑块
moveBtn(e, key) {
const ele = e.target // 获取事件触发元素
const startX = e.clientX // ⿏标相对于浏览器窗⼝可视区域的X坐标（窗⼝坐标），可视区域不包括⼯具栏和滚动条。      const eleWidth = ele.offsetWidth // 元素的布局宽度
const parentWidth = this.$refs.bgImg.offsetWidth // ⽗元素的布局宽度 ---可⽤⼤图⽚的宽度
const MaxX = parentWidth - eleWidth // 可滑动的最⼤距离
if (key === 1) {
this.$refs.ansition = '' // 初始清空⼩图⽚动画
} else {
this.$refs.ansition = '' // 初始清空⼩图⽚动画
}
ansition = '' // 初始清空滑块动画
const endX = e.clientX // 滑动过程中⿏标相对于窗⼝的坐标
this.disX = endX - startX // ⿏标的滑动距离
if (key === 1) {
this.$refs.sliderImg.style.left = this.disX + 'px' // ⼩图⽚的滑动距离
} else {
this.$refs.btnImg.style.left = this.disX + 'px'
}
if (this.disX <= 0) { // 滑动距离⼩于0，重置位置
this.disX = 0
if (key === 1) {
this.$refs.sliderImg.style.left = 0
} else {
this.$refs.btnImg.style.left = 0
}
}
if (this.disX >= MaxX) { // 减去滑块的宽度，体验效果更好---》最⼤滑动距离减去滑块宽度便是真正的滑动距离
this.disX = MaxX
if (key === 1) {
this.$refs.sliderImg.style.left = (parentWidth - this.$refs.sliderImg.width) + 'px'
} else {
this.$refs.btnImg.style.left = (parentWidth - this.$refs.sliderImg.width) + 'px'
}
}
ansform = 'translateX(' + this.disX + 'px)' // 加横向动画
e.preventDefault() // 取消默认事件
}
if (this.loginTypeFlag === 'login') {
this.loginInterface() // 登陆调⽤
} else {
}
ansition = '.4s ease' // 初始化滑块位置
ansform = 'translateX(0)'
// 清除滑动事件
if (key === 1) {
// ⿏标松开复原⼩图⽚
this.$refs.sliderImg.style.left = '1%'
this.$refs.p = this.imgCode.positionY
this.$refs.ansition = '0.4s ease'
} else {
this.$refs.btnImg.style.left = '0'
this.$refs.ansition = '0.4s ease'
}
}
}
  以上便是完整滑动验证码代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。