溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫在前面
找了很多vue進度條組件，都不包含拖拽和點擊事件，input range倒是原生包含input和change事件，但是直接基于input range做進度條的話，樣式部分需要做大量調整和兼容性處理。即使做好了，將來需要修改外觀，又是一番折騰。
基于以上兩個原因，做了一個可以響應input和change事件（即一個是拖動進度條到某處，一個是在進度條某位置點擊使其值變為該位置）的div實現的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" :>
<div class="progress" @mousedown="mousedownHandler" @mouseover="mouseoverHandler"
@mousemove="mousemoveHandler" @mouseup="mouseupHandler" :>
<div class="left" :>
<div class="ball" :></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
事件
總結
以上所述是小編給大家介紹的Vue的事件響應式進度條組件實例詳解，希望對大家有所幫助，如果大家喲任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
