vue 滑动组件,vue滑块验证插件
这篇文章主要为大家详细介绍了某视频剪辑软件滑块解锁组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件滑块解锁组件的使用，供大家参考，具体内容如下
依据射流研究…拖动滑块验证开发的某视频剪辑软件滑块解锁组件。
模板
div ref= wrap class= slider-unlock
div class=之前请按住滑块，拖动到最右边/div
div ref=after class=after
div class= after-inner"{ success？验证成功:请按住滑块，拖动到最右边} }/分区
/div
div ref= slider class= slider :class= { is-success :success } /
/div
/模板
脚本
导出默认值{
名称： SliderUnlock ，
data() {
返回{
成功：假，
清除：空，
}
},
已安装(){
this.init()
},
销毁前(){
this.clear this.clear()
},
方法：{
init() {
//获取数字正射影像图
const after=this .$refs.after
常量滑块=这个.$refs.slider
const wrap=this .$refs.wrap
//设置后内的固定宽度
之后。子节点[0]。风格。宽度=换行。偏移量像素
//滑块移动最大位置
常量限制=换行。offsetwidth滑块。偏移距离
//实时计算滑块的偏移量
让偏移量
//点击滑块时的鼠标X位置
让initX
//页面鼠标移动事件
const docMousemoveHandler=e={
//获取移动后鼠标实时位置
const moveX=e.clientX
//计算滑块应该移动的偏移量
offsetX=moveX - initX
//限制上下限
if (offsetX 0) {
offsetX=0
} else if (offsetX limit) {
offsetX=限值
}
//移动滑块
slider.style.left=offsetX px
//修改高亮背景宽度
after.style.width=offsetX px
if (offsetX=limit) {
成功=真
这个$emit(成功)
文档。removeeventlistener( mousemove ，docMousemoveHandler)
滑块。removeeventlistener( mousedown ，sliderMousedownHandler)
}
}
//页面鼠标松开事件
const docMouseupHandler=e={
//解绑事件
文档。removeeventlistener( mousemove ，docMousemoveHandler)
//重置滑块
if (offsetX限制){
slider.style.left=0
after.style.width=0
}
}
//滑块点击事件
const sliderMousedownHandler=e={
//获取鼠标位置
initX=e.clientX
//绑定页面的鼠标移动事件
文档。addevent侦听器( mousemove ，docMousemoveHandler)
}
//绑定滑块点击事件
滑块。addevent侦听器( mousedown ，sliderMousedownHandler)
//页面鼠标松开事件
文档。addevent侦听器( mouseup ，docMouseupHandler)
//定义清理方法
this.clear=()={
文档。removeeventlistener( mousemove ，docMousemoveHandler)
滑块。removeeventlistener( mousedown ，sliderMousedownHandler)
文档。removeeventlistener( mouseup ，docMouseupHandler)
}
},
},
}
/脚本
style lang=less 范围。滑块-解锁{
高度：45像素
背景：# E1E1E1
边框-半径：4px
位置：相对；
溢出：隐藏；
边框：1px纯色# CCCCCC；
框大小：边框-框；
用户选择：无；之前，在{
位置：绝对；
边距：-1px 0 0-1px；
top:0；
左：0;
z指数：1;
身高：100%;
盒子大小：内容盒；
字体大小：14px
字体粗细：粗体；
行高：43px
文本对齐：居中；
}。之前{
宽度：100%;
颜色：# 333;
填充：0 1px 1px 0
}。在{
宽度：0;
溢出：隐藏；
填充：0 0 1px 0
-内部{
位置：绝对；
宽度：100%;
身高：100%;
颜色：# fff
背景色：# 40C057
}
}。滑块{
位置：绝对；
边距：-1px 0 0-1px；
top:0；
左：0;
z指数：3;
宽度：70px
高度：45像素
边框：1px纯色# CCC
光标：指针；
背景：无重复中心中心# fff
背景-图片：URL(~ @/imgs/icon-allow-right。png)；是-成功{
背景-图片：URL(~ @/imgs/icon-success。png)；
}
}
}
/风格
使用：
SliderUnlock @ success= handler /
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。