基於Vue的事件響應式進度條元件

雲荒杯傾發表於2018-02-04
Vue事件元件

寫在前面

找了很多vue進度條元件，都不包含拖拽和點選事件，input range倒是原生包含input和change事件，但是直接基於input range做進度條的話，樣式部分需要做大量調整和相容性處理。即使做好了，將來需要修改外觀，又是一番折騰。

基於以上兩個原因，做了一個可以響應input和change事件（即一個是拖動進度條到某處，一個是在進度條某位置點選使其值變為該位置）的div實現的Vue元件，這樣既滿足了對進度條事件的需求，也帶來了如有需求變動，樣式修改很方便的好處。

事件響應式進度條的應用場景主要是自定義video播放器的進度條。

效果圖

基於Vue的事件響應式進度條元件

以上就是可以利用本元件實現的一些效果，他們都能響應input和change兩種事件。

首先是模板部分

認真看一下上圖，怎麼構造HTML模板還是需要一番考慮的，我也是改了好幾次，最後定的這個結構。首先有一層外包div就不說了。然後外包div下面就一個class = 'progress'的div，這個div內部的div是表示進度條已劃過部分（class="left"），class="left"這個div內部又包含一個div來表示我們可以拖動的滑塊小球。

說一下好處，這樣的結構，做出來的樣式，在頁面檢查元素的時候，能夠清晰看到每個div和頁面上展示的部分是重合的。

如果你的進度條 表示整個長度的div、表示左半部分的div、表示滑塊的div這三部分不是我這種巢狀結構，而是兄弟節點關係，你就得用樣式做相對定位，讓後兩個兄弟節點上移到第一個兄弟元素的位置，這樣，檢查元素的時候，進度條下面的其他元件的盒子就會浸透到進度條的區域。雖然使用者不會檢查元素，但是時間久了之後也不方便程式設計師自己觀察，不是嗎。

也就是說，我們都希望HTML結構表達的元素和檢查元素的時候顯示的每個元素的佔位是一致的。這也算是對你的HTML結構是否構造合理的一個評價指標。

<template>
	<div class="progress-wrapper" :style="wrapStyle">
        <div class="progress" @mousedown="mousedownHandler" @mouseover="mouseoverHandler"
             @mousemove="mousemoveHandler" @mouseup="mouseupHandler" :style="pBarStyle">
            <div class="left" :style="leftStyle">
                <div class="ball" :style="ballStyle"></div>
            </div>
            <slot></slot>
        </div>
    </div>
</template>
複製程式碼

js部分

對現在就有需求使用這個帶事件的進度條的同學來說，看看這部分，可以幫助你自己修改、完善它。

而對於想要先試用該元件的同學，則可以先不看這部分，等你用到發現該元件功能不足的時候，再看這部分程式碼也不遲。

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',
                },
                // 標記是否按下滑鼠
                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', this.pValue, percent);

                    this.isMouseDownOnBall = false;
                }
            },
            mouseoverHandler(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 + '%';
        },
    }
複製程式碼

安裝、使用

地址

程式碼庫地址在GitHub

安裝、使用

npm install vue-draggable-progressbar --save

import progressBar from 'vue-draggable-progressbar'
複製程式碼

用例：

<progress-bar ref="aa"></progress-bar>

<progress-bar width="40%" leftBg="greenyellow" bgc="#ccc" ballBgc="red"></progress-bar>

<progress-bar width="60%" leftBg="linear-gradient(to right, yellow, pink)" bgc="#ccc" ballBgc="red"></progress-bar>

<progress-bar width="80%" leftBg="yellow" bgc="#ccc" ballBgc="red" height="30px"></progress-bar>

<progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="rgba(255,0,0,0.2)" height="40px"></progress-bar>

<progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="red" :max="max" :value="value" :min="min"
              @pbar-drag="drag" @pbar-seek="seek"></progress-bar>

複製程式碼

元件props

  • leftBg：進度條已劃過部分背景色
  • bgc：進度條還未劃過部分背景色
  • ballBgc：滑塊背景色
  • width：進度條佔父元件的寬度百分比，傳百分比數值
  • height：進度條高度，傳畫素值
  • max：進度條最大值
  • min：最小值
  • value：當前值

事件

  • pbar-drag: 拖動進度條時觸發，回傳value值和百分比值
  • pbar-drag: 點選進度條某一位置時觸發，回傳value值和百分比值

最後

如果本文對你有幫助，請不要吝嗇手中的點贊喲。 程式設計貴在實踐，趕緊行動起來吧！

關於作者

作者：雲荒杯傾

技術部落格 || GitHub || 掘金主頁

相關文章