How to implement event-responsive progress bar component in Vue

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.

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

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&#39;t less than min !");
   }
   // 初始百分比
   this.leftStyle.width = (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100 + &#39;%&#39;;
  },
 }

Installation and use

Address

Code library address is installed on GitHub

, use

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

Use case:

<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>

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.

Related articles:

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!