vue移动端进度条,vue拖拽流程图
这篇文章主要为大家详细介绍了某视频剪辑软件实现拖拽进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现拖拽进度条的具体代码，供大家参考，具体内容如下
组件代码：
模板
差异
div class=slider ref=slider
div class= process :style= { width } /div
div class= thunk ref= trunk :style= { left }
div class=block/div
div class=tips
！- span{{scale*100}}/span -
i class=fas fa-caret-down/i
/div
/div
/div
差异
按钮
@click=
()={
这个. per
}
/按钮
{{ per }}%button
@click=
()={
如果(this.per 0) {
这个。per-；
}
}
-
/按钮
/div
/div
/模板
脚本
/*
*最小值进度条最小值
*最大进度条最大值
*五型车对当前值进行双向绑定实时显示拖拽进度
* */
导出默认值{
道具：[min ， max ， value]，
data() {
返回{
滑块：空，//滚动条数字正射影像图元素
thunk: null，//拖拽数字正射影像图元素
per: this.value，//当前值
};
},
//渲染到页面的时候
已安装(){
this.slider=this .$ refs.slider
this.thunk=this .$ refs.trunk
var _ this=this
这个。thunk。onmousedown=function(e){
var width=parse int(_ this。宽度)；
var disX=e.clientX
文档。onmousemove=function(e){
//值，左侧，宽度
//当价值变化的时候，会通过计算属性修改左侧，宽度
//拖拽的时候获取的新宽度
var new width=e . clientx-disX width；
//拖拽的时候得到新的百分比
var scale=new width/_ this。滑块。offsetwidth
_这个。per=数学。ceil((_ this。max-_这个。min)* scale _ this。min)；
_this.per=Math.max(_this.per，_this。min)；
_this.per=Math.min(_this.per，_this。max)；
_这个. emit(input ，_ this。per)；
};
document.onmouseup=function () {
文档。onmousemove=document。onmouseup=null
};
返回错误的
};
},
计算值：{
//设置一个百分比，提供计算滑块进度宽度和树干的左边的值
//对应公式为当前值-最小值/最大值-最小值=滑块进度宽度/滑块总宽度
//行李箱左侧=滑块进度宽度主干宽度/2
scale() {
返回(这个。根据这个。min)/(这个。麦克斯-这个。min)；
},
宽度(){
if (this.slider) {
返回这个。滑块。offsetwidth *这个。标度“px”；
}否则{
返回0“px”；
}
},
左(){
if (this.slider) {
返回（
这个。滑块。offsetwidth *这个。缩放-
this.thunk.offsetWidth/2
px
);
}否则{
返回0“px”；
}
},
},
};
/脚本
风格。方框{
边距：100px auto 0；
宽度：80%;
}。清除：在{
内容："";
显示：块；
明确：两者都有；
}。滑块{
用户选择：无；
位置：相对；
边距：20px 0；
宽度：400像素
高度：10px
背景：# e4e 7版；
边框半径：5px
光标：指针；
}。滑块。流程{
位置：绝对；
左：0;
top:0；
宽度：112像素
高度：10px
边框半径：5px
背景：# 81b159
}。滑块thunk {
位置：绝对；
左：100像素
top:-7px；
宽度：20px
高度：20px
}。滑块。区块{
宽度：20px
高度：20px
边界半径：50%;
边框：2px固体# 409eff
背景：rgba(255，255，255，1)；
转场：所有0.2s
}。滑块。提示{
位置：绝对；
左：-7px；
底部：30px
最小宽度：15px
文本对齐：居中；
填充：4px 8px
/*背景：# 000;*/
边框半径：5px
高度：24px
颜色：# fff
}。滑块。提示我{
位置：绝对；
左边距：-5px；
左：50%;
底部：-9px；
字体大小：16px
颜色：# 000;
}。滑块。阻止：悬停{
变换：缩放(1.1);
不透明度：0.6;
}
/风格
调用：
模板
滑块：min= 0 :max= 100 v-model= per /滑块
/模板
脚本
从" @/组件/滑块"导入滑块；
导出默认值{
data() {
return { }；
},
计算值：{
per: {
get() {
返回0;
},
设置（值){
控制台。日志(val)；
},
},
},
组件：{ slider }，
已安装(){},
方法：{},
};
/脚本
风格
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。