How to implement event-responsive progress bar component in Vue-JS Tutorial-php.cn

This article mainly introduces the example code of Vue's event-responsive progress bar component. It is very good and has reference value. Friends who need it can refer to it

Write it in front

I found a lot of vue progress bar components, but none of them include drag and click events. The input range natively contains input and change events, but if you make a progress bar directly based on the input range, the style Some parts require a lot of adjustments and compatibility processing. Even if it is done, if the appearance needs to be modified in the future, it will be a lot of trouble.

Based on the above two reasons, I made a program that can respond to input and change events (that is, one is to drag the progress bar somewhere, and the other is to click on a certain position of the progress bar to change its value to that position) The Vue component implemented by p not only meets the demand for progress bar events, but also brings the benefit of convenient style modification if the requirements change.

Rendering

The above are some of the effects that can be achieved by using this component. They can respond to both input and change events.

First is the template part

Look at the picture above carefully. How to construct the HTML template still needs some consideration. I also changed it several times and finally settled on this one. structure. First of all, there is a layer of outsourcing that I won’t talk about. Then there is a p with class = 'progress' under the outsourcing p. The p inside this p means that the progress bar has crossed the part (class="left"). The p with class="left" also contains a p indicating that The slider ball that we can drag.

Let’s talk about the benefits. With such a structure and the style created, when checking the elements on the page, you can clearly see that each p overlaps with the part displayed on the page.

If your progress bar represents p of the entire length, p represents the left half, and p represents the slider, it is not a nested structure like mine, but a sibling node relationship, you have to use styles to do relative Position and move the last two sibling nodes up, so that when the element is checked, the boxes of other components below the progress bar will penetrate into the area of the progress bar. Although the user will not check the elements, it will not be convenient for programmers to observe by themselves after a long time, right?

In other words, we all hope that the elements expressed by the HTML structure and the placeholder of each element displayed when checking the element are consistent. This can also be regarded as an evaluation indicator of whether your HTML structure is reasonably constructed.

Copy after login

js part

For students who now need to use this progress bar with events, take a look at this part to help you modify and improve it. it.

For students who want to try this component first, you can skip reading this part. When you find that the function of this component is insufficient, it will not be too late to look at this part of the code.

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 + '%'; }, }

Copy after login

Installation and use

Address

Code library address is installed on GitHub

, use

npm install vue-draggable-progressbar --save import progressBar from 'vue-draggable-progressbar'

Copy after login

Use case:

Copy after login

Component props

leftBg: Progress The bar has crossed part of the background color
bgc: The progress bar has not crossed part of the background color
ballBgc: Slider background color
width: the percentage of the width of the parent component of the progress bar, pass the percentage value
height: the height of the progress bar, pass the pixel value
max: Maximum value of the progress bar
min: Minimum value
value: Current value

Event

pbar-drag: Triggered when dragging the progress bar, returning value and percentage value
pbar-drag: Triggered when a certain position of the progress bar is clicked, and the value and percentage value are returned.

The above is what I compiled for everyone. Yes, I hope it will be helpful to everyone in the future.

How to use Dom elements in jQuery?

What are the commonly used array functions in js?

About how to use datepicker in vue2.0

The above is the detailed content of How to implement event-responsive progress bar component in Vue. For more information, please follow other related articles on the PHP Chinese website!