I just came across a function that does audio custom playback styles, but there is no related component, so I package one and share it with you. We can modify the style according to their own needs, which have bugs and deficiencies, welcome to point out.

rendering

Screen recording has a border, please ignore ~

Component use of C-Progress

The import

import CProgress from './.. /components/c-progress'Copy the code

use

<c-progress class="c-progress" :percent="70" @percentChange="onPercentChange" />
<c-progress class="c-progress" :percent="70" :show-slider="true" :show-per-text="false"/>
<c-progress class="c-progress" :percent="70" :show-slider="true" :width="400"/>
<c-progress class="c-progress" :percent="70" :show-slider="true" :width="200" :slider-width="15"/>
<c-progress class="c-progress" :percent="80" :show-slider="false" progress-color="red"/>
<c-progress class="c-progress" :percent="80" :show-slider="false" type="warning"/>
<c-progress class="c-progress" :percent="80" :show-slider="false" type="fail"/>
<c-progress class="c-progress" :percent="90" :show-slider="true" type="success" />

Copy the code

Component properties

Component events

<c-progress class="c-progress" :percent="70" @percentChange="onPercentChange" />

onPercentChange (per) {
    console.log(per)
}

Copy the code

Component source

<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> <span v-if="showPerText">{{tempPercent}}%</span> </div> </template> <script> // 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}, // Progress bar width: {type: Number, default: 300 }, bgColor: { type: String, default: '#ebeef5' }, progressColor: { type: String, default: '#409EFF'}, // sliderWidth: {type: Number, default: 20}, // color type: {type: String, default: Colortable.default}}, data () {return {sliderLeft: 0, progressWidth: 0, // The current width of the progress bar tempPercent: 0}}, computed: {setProgressBgStyle () {return {// Add slider width: `${this.width + this.sliderWidth}px` } }, / / set the style of the progress bar setProgressStyle () {const color = colorTable [enclosing type] | | this. ProgressColor return {width: `${this.progressWidth}px`, background: Color}}, / / set the style of the slider setSliderStyle () {const color = colorTable [enclosing type] | | this. ProgressColor return {border: `1px solid ${color}`, width: `${this.sliderWidth}px`, height: `${this.sliderWidth}px`, left: `${this.sliderLeft}px` } } }, mounted () { this.sliderLeft = this.width / 100 * this.percent this.progressWidth = this.sliderLeft + this.sliderWidth This.temppercent = this.percent this.addListener()}, methods: { addListener () { const slider = this.$refs.slider const progress = this.$refs.progress let isClickSlider = false let Progress. onclick = (e) => {// Prevent the event from bubblingif (e.target == slider) {return} let curX = progress.offsetLeft this.sliderLeft = e.offsetX - curX if (this.sliderLeft <= 0) { this.sliderLeft = 0 } if (this.sliderLeft >= this.width) { this.sliderLeft = this.width } this._countCurPercent() } slider.onmousedown = (e) => { IsClickSlider = true let curX = slider.offsetleft distance = e.pagex - curX} progress.onmousemove = (e) => { If (isClickSlider) {if ((e.pagex - distance) >= 0 && (e.pagex - distance) <= (this.width - 0)) { this.sliderLeft = e.pageX - distance this._countCurPercent() } } } progress.onmouseup = () => { isClickSlider = false } }, _countCurPercent () {this.tempPercent = math.ceil (parseInt(this.sliderleft/this.width * 100)) This.progresswidth = this.sliderLeft + 20 If (this.tempPercent <= 0) {this.progresswidth = 0 this.sliderLeft = 0} if (this.tempPercent >= 100)  { this.progressWidth = this.width + 20 this.sliderLeft = this.width } this.$emit('percentChange', this.tempPercent) } } } </script> <style scoped lang="scss"> .c-progress { $width: 300px; $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: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #409EFF; position: absolute; z-index: 10; left: 10px; } } } </style>Copy the code