vue 滑块验证,vue移动端滑动事件
本文主要详细介绍了移动滑块验证的vue实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue验证移动滑块的具体代码，供大家参考。具体内容如下
记录今天的学习内容。
div class= solidBox :class= { solidBox 1 :validation }
div @ mousedown= solid star class= solid :class= { solid 1 :validation } /div
{{!验证？textStart : textEnd}}
/div。实体框{
位置：相对；
显示器：flex
justify-content:居中；
对齐-项目：居中；
边距：20px 0；
宽度：100%；
高度：35px
背景色：# 999999；固体{
位置：绝对；
左：0；
显示器：flex
justify-content:居中；
对齐-项目：居中；
宽度：35px
高度：35px
光标：指针；
边框：1px纯色# 666666；
背景：url(/img/cut2/arrow2.png )中心无重复；
背景色：# ffffff
框大小：边框-框；
}
solid1 {
背景：url(/img/cut2/ok.png )中心无重复；
背景尺寸：100%；
边框：1px solid # 358097
}
}
. solidBox1 {
颜色：# ffffff
背景色：# 1 aad 19；
}
方法是用方法编写的。
//当鼠标被按下时
solidStar(e) {
//console . log(e)；
//获取当前DOM元素宽度的当前鼠标点击位置
设solidDom=e.target
设moveStart=e.clientX
let soliddom with=soliddom . offsetwidth；
//从父节点中减去滑块宽度，得到滑块的最大移动距离。
设MaxW=e.path[1]。client width-soliddom with；
//设置判断条件，防止验证成功后调用鼠标移动方法。
if (this.validation===true) {
返回false
}
//鼠标移动
(document.onmousemove=e={
//获取移动时浏览器左上角到当前位置的X轴距离。
设endX=e.clientX
//根据上面获得的数据计算鼠标移动的距离
this . movex=endX-move start；
//判断如果用户反方向移动，移动距离赋零。
if (this.moveX=0) {
this . movex=0；
}
//判断滑块的移动距离是否大于最大宽度，并赋予其最大宽度。
if (this.moveX=MaxW) {
this.moveX=MaxW
}
//为了更好的体验，写动画或者根本不写，否则其他动画会覆盖右边的拖动动作。
soliddom . style . transition= 0s all ；
soliddom . style . left=this . movex px ；
//重点是e.preventDefault()。此方法将关闭与当前事件关联的其他操作，只执行此事件。
e . prevent default()；
}),
//鼠标抬起
(document.onmouseup=()={
//如果鼠标抬起后拖动距离小于最大可移动距离，则返回起点0。
如果(this.moveX！==MaxW) {
soliddom . style . transition=" . 5s linear "；
soliddom . style . left=0；
}否则{
//如果判断条件设置成功
this.validation=true
}
//动作完成后清空事件
document.onmousemove=null
document.onmouseup=null
});
}
导出默认值{
姓名： twologin ，
data() {
返回{
loginBoxShow:真的，
isActive: 0，
用户名： ，
psd: ，
输入1: ，
输入2: ，
选择： ，
验证：假，
TextStart:向右拖动滑块，
TextEnd:“验证成功”，
moveX: 0
};
},
最后写一些今天学到的知识点。
Event.screenX是从屏幕左上角到鼠标事件当前位置的x轴距离。clientX是从浏览器左上角到鼠标事件当前位置的x轴距离。offsetX是从当前单击控件的左上角到鼠标事件当前位置的x轴距离。evevt.preventDefault()
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。