vue实现横向可滑动的菜单,vue 自定义滚动条
这篇文章主要为大家详细介绍了某视频剪辑软件实现双向滑动输入条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现双向滑动输入条的具体代码，供大家参考，具体内容如下
效果图如下：
组件支持传入最小值（分钟)最大值（最大)的范围，并可设置初始最小值（首字母)和初始最大值(initialMax)
拖动滑块调整最大最小值，并可点击输入条位置，切换数值
创建滑动输入条组件Slider.vue
模板
div class=m滑块ref=滑块
div class= u-slider-rail @ click= onClickPoint /div
div class= u-slider-track @ click= onclick point :style= ` left:$ { left } px；右：自动；宽度：$ { right-left } px` /div
div class= u-slider-handle ref= left @ mousedown= onLeftMouseDown :style= ` left:$ { left } px；右：自动；transform:平移x(-50%)；` /div
div class= u-slider-handle ref= right @ mousedown= onRightMouseDown :style= ` left:$ { right } px；右：自动；transform:平移x(-50%)；` /div
/div
/模板
脚本
导出默认值{
名称："滑块",
道具：{
最小值：{ //滑动输入条最小值
类型：数量，
默认值：0
},
最大值：{ //滑动输入条最大值
类型：数量，
默认值：100
},
initialMin: { //滑动输入条初始最小值，默认在最左侧
类型：数量，
默认值：0
},
initialMax: { //滑动输入条初始最大值，默认在最右侧
类型：数量，
默认值：100
}
},
data () {
返回{
左边： ,//左滑块距离滑动条左端的距离
右： ,//右滑动距离滑动条左端的距离
宽度： //滑动输入条在页面中的宽度
}
},
已安装(){
this.width=这个refs.slider.clientWidth
这个。左=这个。初始min * this。宽度/这个。最大
这个。对=这个。初始最大值*这个。宽度/这个。最大
},
计算值：{
低(){
返回数学。圆(这个。左/这个。宽度*这个。最大)
},
高(){
返回数学。圆(这个。对/这个。宽度*这个。最大)
}
},
观察：{
低（到，从){
这个emit(lowChange ，to) //左滑块对应数字回调
},
高（到，从){
这个emit(highChange ，to) //右滑块对应数字回调
}
},
方法：{
onClickPoint (e) { //点击滑动条，移动滑块
var offsetLeft=this .$refs.slider.offsetLeft //滑动条左端距离屏幕左侧的距离
var moveX=e.clientX - offsetLeft
if (moveX=this.left) {
this.left=moveX
} else if(这个。movex=this。右){
this.right=this.moveX
}否则{
如果((moveX-this。左)(这个。right-moveX)){
this.left=moveX
}否则{
this.right=moveX
}
}
},
onLeftMouseDown (e) { //在滚动条上拖动左滑块
//滑块水平方向上距离屏幕左端的距离，减去滑块距离滑动条最左端的距离：e.clientX - this .$refs.left.offsetLeft
var offsetLeft=this .$refs.slider.offsetLeft //滑动条左端距离屏幕左侧的距离
document.onmousemove=(e)={
var moveX=e.clientX - offsetLeft
if (moveX 0) {
this.left=0
} else if (moveX=this.right) {
左=右
}否则{
this.left=moveX
}
}
document.onmouseup=(e)={
document.onmousemove=null
document.onmouseup=null
}
},
onRightMouseDown (e) { //在滚动条上拖动右滑块
///滑块水平方向上距离屏幕左端的距离，减去滑块距离滑动条最左端的距离：e.clientX - this .$refs.left.offsetLeft
var offsetLeft=this .$refs.slider.offsetLeft //滑动条左端距离屏幕左侧的距离
console.log(offsetLeft:，offsetLeft)
document.onmousemove=(e)={
var moveX=e.clientX - offsetLeft
if (moveX this.width) {
this.right=this.width
} else if (moveX=this.left) {
这个。右=这个。左
}否则{
this.right=moveX
}
}
document.onmouseup=(e)={
document.onmousemove=null
document.onmouseup=null
}
}
}
}
/脚本
style lang=less 范围。m滑块{
高度：4px
位置：相对；
光标：指针；
触摸-动作：无；
：悬停{。u形滑轨{ //灰色未选择滑动条背景色
背景：# E3E3E3
}。u形滑块轨道{ //蓝色已选择滑动条背景色
背景：# 1890ff
}
}。u形滑轨{ //灰色未选择滑动条背景色
位置：绝对；
z指数：99;
高度：4px
宽度：100%;
背景：# f5f5f5
边框-半径：2px
过渡：背景。3s；
}。u形滑块轨道{ //蓝色已选择滑动条背景色
背景：# 91d 5 ff
边框-半径：4px
位置：绝对；
z指数：99;
高度：4px
光标：指针；
过渡：背景。3s；
}。u形滑块手柄{ //滑块
位置：绝对；
z指数：999;
宽度：14px
高度：14px
margin-top:-7px；
方框阴影：0;
背景：# fff
边框：2px纯色# 91d 5 ff
边界半径：50%;
光标：指针；
过渡：边框颜色。3s，框阴影。6s，变换。3s三次贝塞尔曲线(.18,89,32,1.28);
：悬停{
边框颜色：# 1890ff
}
}
}
/风格
在要使用的页面引入
div class=" m-num "
p class=u-num{{ low }}/p
p class=u-num{{ high }}/p
/div
div class=slider
滑块
:min=0
:max=100
:initialMin=低
:initialMax=高
@lowChange=lowChange
@highChange=highChange
/
/div
从"@/组件/滑块"导入滑块
组件：{
滑块
}
data () {
返回{
低：20,
高：80
}
}
lowChange (val) {
this.low=val
console.log(lowChange:"，val)
},
高变化（值){
this.high=val
console.log(highChange:"，val)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。