效果：
1、新建子组件customProgress.vue
<template><div class="c-progress"><div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"><div class="c-progress-inner" :style="setProgressStyle"></div><!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> --><div v-if="showSlider" class="c-progress-slider" ref="slider" :style="{border: `1px solid ${borderColor}`, width: `${sliderWidth}px`,height: `${sliderHeight}px`,left: `${sliderLeft}px`}"></div></div><span v-if="showPerText">{{tempPercent}}%</span></div></template><script>// 使用了element的颜色const colorTable = {success: '#13ce66',fail: '#ff4949',warning: '#e6a23c',default: '#409EFF'}export default {name: 'CProgress',props: {percent: {type: Number,default: 60},showSlider: {type: Boolean,default: true},showPerText: {type: Boolean,default: true},// 进度条的宽度width: {type: Number,default: 160},bgColor: {type: String,default: '#ebeef5'},progressColor: {type: String,default: '#409EFF'},// 滑块的宽度sliderWidth: {type: Number,default: 10},sliderHeight: {type: Number,default: 20},// 最大值max: {type: Number,default: 100},// 颜色的类型type: {type: String,default: colorTable.default}},data () {return {sliderLeft: 0, // 滑块相对父元素发x坐标progressWidth: 0, // 进度条当前的的宽度tempPercent: 0}},computed: {// 设置进度条的背景样式setProgressBgStyle () {return {background: this.bgColor,// 加上滑块的宽度width: `${this.width + this.sliderWidth}px`}},// 设置进度条的样式setProgressStyle () {const color = colorTable[this.type] || this.progressColorreturn {width: `${this.progressWidth}px`,background: color}},//滑块边框颜色borderColor(){return colorTable[this.type] || this.progressColor},},mounted () {this.sliderLeft = this.width / this.max * this.percentthis.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度this.tempPercent = this.percentthis.addListener()},methods: {addListener () {//注释掉滑块拖动const slider = this.$refs.sliderconst progress = this.$refs.progresslet isClickSlider = falselet distance = 0 // 滑块与点击坐标的绝对距离progress.onclick = (e) => {// 阻止事件冒泡if (e.target == slider) {return}let curX = progress.offsetLeftthis.sliderLeft = e.offsetX - curXif (this.sliderLeft <= 0) {this.sliderLeft = 0}if (this.sliderLeft >= this.width) {this.sliderLeft = this.width}this._countCurPercent()}slider.onmousedown = (e) => {isClickSlider = truelet curX = slider.offsetLeftdistance = e.pageX - curX // 得出绝对距离}progress.onmousemove = (e) => {if (isClickSlider) {// 判断是否已经超出进度条的长度if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {this.sliderLeft = e.pageX - distancethis._countCurPercent()}}}progress.onmouseup = () => {isClickSlider = false}},// 算出百分比_countCurPercent () {this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * this.max))//最大值56// this.progressWidth = this.sliderLeft + 20 // ⚪滑块this.progressWidth = this.sliderLeft + 10// 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整if (this.tempPercent <= 0) {this.progressWidth = 0this.sliderLeft = 0}if (this.tempPercent >= 100) {this.progressWidth = this.width + 20this.sliderLeft = this.width}console.log(this.tempPercent,'this.tempPercent')this.$emit('percentChange', this.tempPercent)},// 监听父组件输入框变化handleParentChange(num){console.log(num,'num')this.sliderLeft = num/this.max * this.widththis.progressWidth = this.sliderLeft + 10if(num >= this.max){this.progressWidth = this.width + 20this.sliderLeft = this.width}}}}</script><style scoped lang="scss">.c-progress {$width: 160px;$radius: 5px;display: flex;align-items: center;span {margin-left: 5px;font-size: 14px;color: #666;}.c-progress-outer {width: $width;height: 10px;border-radius: $radius;background: #ebeef5;position: relative;display: flex;align-items: center;.c-progress-inner {width: 100px;height: 10px;background: #409EFF;border-radius: $radius;}.c-progress-slider {width: 10px;height: 20px;border-radius: 5px;background: #fff;border: 1px solid #409EFF;position: absolute;z-index: 2;left: 10px;cursor: pointer;}}}</style>
2、使用
import customProgress from '@/views/my_components/customProgress.vue'components:{customProgress},<div class="music_con"><img src="@/assets/images/volume.png" alt=""><customProgress ref="cusChild":percent="volumeNum"bgColor="#ddd" progressColor="#409EFF":showPerText="true":max="100" @percentChange="onPercentChange"/></div>onPercentChange(num){this.volumeNum = num},
