написать впереди
Я нашел много компонентов индикатора выполнения Vue, которые не включают события перетаскивания и щелчка.Диапазон ввода изначально включает события ввода и изменения, но если индикатор выполнения напрямую основан на диапазоне ввода, часть стиля необходимо настроить и совместимый. Даже если это будет сделано, это будет жеребьевка, если вам нужно будет изменить внешний вид в будущем.
Основываясь на двух вышеуказанных причинах, компонент Vue, реализованный в виде элемента div, который может реагировать на события ввода и изменения (то есть один — перетаскивать индикатор выполнения в определенное место, а другой — щелкать в определенной позиции элемента индикатор выполнения, чтобы изменить его значение на эту позицию), это выполненоНеобходимость событий индикатора выполнения, что также приводит к изменению спроса,Легко изменить стильпреимущества.
Сценарий применения индикатора выполнения, реагирующего на события, в основном предназначен для настройки индикатора выполнения видеоплеера.
визуализация
Выше приведены некоторые из эффектов, которые могут быть достигнуты с помощью этого компонента, и они могут реагировать как на события ввода, так и на события изменения.
Первая часть шаблона
Внимательно посмотрите на картинку выше, как построить HTML-шаблон все еще требует некоторого рассмотрения, я также несколько раз менял его и, наконец, остановился на этой структуре. Прежде всего, не говоря уже о слое аутсорсинга div. Затем есть div с class = 'progress' под аутсорсинговым div. Div внутри этого div указывает, что индикатор выполнения был пересечен (class="left"), а div с class="left" содержит еще один 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>
Компоненты реквизита
- max: максимальное значение индикатора выполнения
- Мин: минимальное значение
- Значение: текущее значение
мероприятие
- pbar-drag: срабатывает при перетаскивании индикатора выполнения, возвращает значение и процентное значение.
- pbar-drag: срабатывает при нажатии определенной позиции индикатора выполнения и возвращает значение и процентное значение.
наконец
Если эта статья оказалась для вас полезной, пожалуйста, не скупитесь на палец вверх. Программирование важнее на практике, торопитесь и действуйте!
Об авторе
Автор: Yunhuang Кубок заливки