摘要：事件響應(yīng)式進(jìn)度條的應(yīng)用場(chǎng)景主要是自定義播放器的進(jìn)度條。效果圖以上就是可以利用本組件實(shí)現(xiàn)的一些效果，他們都能響應(yīng)和兩種事件。部分對(duì)現(xiàn)在就有需求使用這個(gè)帶事件的進(jìn)度條的同學(xué)來(lái)說(shuō)，看看這部分，可以幫助你自己修改完善它。

找了很多vue進(jìn)度條組件，都不包含拖拽和點(diǎn)擊事件，input range倒是原生包含input和change事件，但是直接基于input range做進(jìn)度條的話，樣式部分需要做大量調(diào)整和兼容性處理。即使做好了，將來(lái)需要修改外觀，又是一番折騰。

基于以上兩個(gè)原因，做了一個(gè)可以響應(yīng)input和change事件（即一個(gè)是拖動(dòng)進(jìn)度條到某處，一個(gè)是在進(jìn)度條某位置點(diǎn)擊使其值變?yōu)樵撐恢茫┑膁iv實(shí)現(xiàn)的Vue組件，這樣既滿足了對(duì)進(jìn)度條事件的需求，也帶來(lái)了如有需求變動(dòng)，樣式修改很方便的好處。

事件響應(yīng)式進(jìn)度條的應(yīng)用場(chǎng)景主要是自定義video播放器的進(jìn)度條。

以上就是可以利用本組件實(shí)現(xiàn)的一些效果，他們都能響應(yīng)input和change兩種事件。

認(rèn)真看一下上圖，怎么構(gòu)造HTML模板還是需要一番考慮的，我也是改了好幾次，最后定的這個(gè)結(jié)構(gòu)。首先有一層外包div就不說(shuō)了。然后外包div下面就一個(gè)class = "progress"的div，這個(gè)div內(nèi)部的div是表示進(jìn)度條已劃過(guò)部分（class="left"），class="left"這個(gè)div內(nèi)部又包含一個(gè)div來(lái)表示我們可以拖動(dòng)的滑塊小球。

說(shuō)一下好處，這樣的結(jié)構(gòu)，做出來(lái)的樣式，在頁(yè)面檢查元素的時(shí)候，能夠清晰看到每個(gè)div和頁(yè)面上展示的部分是重合的。

如果你的進(jìn)度條 表示整個(gè)長(zhǎng)度的div、表示左半部分的div、表示滑塊的div這三部分不是我這種嵌套結(jié)構(gòu)，而是兄弟節(jié)點(diǎn)關(guān)系，你就得用樣式做相對(duì)定位，讓后兩個(gè)兄弟節(jié)點(diǎn)上移到第一個(gè)兄弟元素的位置，這樣，檢查元素的時(shí)候，進(jìn)度條下面的其他組件的盒子就會(huì)浸透到進(jìn)度條的區(qū)域。雖然用戶不會(huì)檢查元素，但是時(shí)間久了之后也不方便程序員自己觀察，不是嗎。

也就是說(shuō)，我們都希望HTML結(jié)構(gòu)表達(dá)的元素和檢查元素的時(shí)候顯示的每個(gè)元素的占位是一致的。這也算是對(duì)你的HTML結(jié)構(gòu)是否構(gòu)造合理的一個(gè)評(píng)價(jià)指標(biāo)。

對(duì)現(xiàn)在就有需求使用這個(gè)帶事件的進(jìn)度條的同學(xué)來(lái)說(shuō)，看看這部分，可以幫助你自己修改、完善它。

而對(duì)于想要先試用該組件的同學(xué)，則可以先不看這部分，等你用到發(fā)現(xiàn)該組件功能不足的時(shí)候，再看這部分代碼也不遲。

export default {
        name: "ProgressBar",
        props: {
            leftBg: String,
            bgc: String,
            ballBgc: String,
            height: String,
            width: String,
            max: {
                type: Number,
                default: 100,
            },
            min: {
                type: Number,
                default: 0,
            },
            value: {
                type: Number,
                default: 36,
            },
        },
        data: function () {
            return {
                pValue: this.value,
                pMax: this.max,
                pMin: this.min,
                wrapStyle: {
                    "width": this.width,
                },
                pBarStyle: {
                    "backgroundColor": this.bgc,
                    "height": this.height,
                },
                leftStyle: {
                    "width": this.progressPercent + "%",
                    "background": this.leftBg,
                    "height": this.height,
                },
                ballStyle: {
                    "backgroundColor": this.ballBgc,
                    "height": this.height,
                    "width": this.height,
                    "borderRadius": parseInt(this.height) / 2 + "px",
                    "right": - parseInt(this.height) / 2 + "px",
                },
                // 標(biāo)記是否按下鼠標(biāo)
                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){
                    // 修改進(jìn)度條本身
                    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){
                    // 修改進(jìn)度條本身
                    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", this.pValue, percent);

                    this.isMouseDownOnBall = false;
                }
            },
            mouseoverHandler(e){
                // 沒有按左鍵進(jìn)入進(jìn)度條
                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(){
            // 數(shù)據(jù)驗(yàn)證
            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 + "%";
        },
    }

代碼庫(kù)地址在GitHub

npm install vue-draggable-progressbar --save

import progressBar from "vue-draggable-progressbar"

用例：

leftBg：進(jìn)度條已劃過(guò)部分背景色

bgc：進(jìn)度條還未劃過(guò)部分背景色

ballBgc：滑塊背景色

width：進(jìn)度條占父組件的寬度百分比，傳百分比數(shù)值

height：進(jìn)度條高度，傳像素值

pbar-drag: 拖動(dòng)進(jìn)度條時(shí)觸發(fā)，回傳value值和百分比值

pbar-drag: 點(diǎn)擊進(jìn)度條某一位置時(shí)觸發(fā)，回傳value值和百分比值

如果本文對(duì)你有幫助，請(qǐng)不要吝嗇手中的點(diǎn)贊喲。
編程貴在實(shí)踐，趕緊行動(dòng)起來(lái)吧！

技術(shù)博客 || GitHub || 掘金主頁(yè)