标记是否按下鼠标
isMouseDownOnBall: false,}
},computed: {
progressPercent(){
return (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100;
},progressElement(){
return this.$el.getElementsByClassName('progress')[0];
},methods: {
mousedownHandler(e){
if(e.which === 1){
this.isMouseDownOnBall = true;
}
},mousemoveHandler(e){
if(this.isMouseDownOnBall === true){
//
修改进度条本身
let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth;
let percent = decimal * 100;
this.leftStyle.width = percent + '%';
//
修改value
this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
this.$emit('pbar-drag',this.pValue,percent);
}
},mouseupHandler(e){
if(this.isMouseDownOnBall){
//
修改进度条本身
let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth;
let percent = decimal * 100;
this.leftStyle.width = percent + '%';
//
修改value
this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
this.$emit('pbar-seek',percent);
this.isMouseDownOnBall = false;
}
},mou
SEOverHandler(e){
// 没有按左键进入进度条
if(e.which === 0){
this.isMouseDownOnBall = false;
}
}
},watch: {
max(cur,old){
this.pMax = cur;
},min(cur,old){
this.pMin = cur;
},value(cur,old){
this.pValue = cur;
},progressPercent(cur,old){
this.leftStyle.width = cur + '%';
}
},mounted(){
// 数据验证
if(this.max < this.min){
console.error("max can't less than min !");
}
// 初始百分比
this.leftStyle.width = (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100 + '%';
},}
@H_
404_29@
安装、使用
地址
代码库地址在
安装、使用
@H_
404_29@
用例：
@H_404_29@
组件props
- leftBg：进度条已划过部分背景色
- bgc：进度条还未划过部分背景色
- ballBgc：滑块背景色
- width：进度条占父组件的宽度百分比，传百分比数值
- height：进度条高度，传像素值
- max：进度条最大值
- min：最小值
- value：当前值
事件
- pbar-drag: 拖动进度条时触发，回传value值和百分比值
- pbar-drag: 点击进度条某一位置时触发，回传value值和百分比值
总结
以上所述是小编给大家介绍的Vue的事件响应式进度条组件实例详解，希望对大家有所帮助，如果大家哟任何疑问欢迎给我留言，小编会及时回复大家的！
