Comment implémenter un composant de barre de progression sensible aux événements dans Vue

Cet article présente principalement l'exemple de code du composant de barre de progression sensible aux événements de Vue. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Écrivez-le. devant

J'ai trouvé beaucoup de composants de barre de progression de vue, dont aucun n'inclut des événements de glisser-cliquer. La plage d'entrée contient nativement des événements d'entrée et de modification, mais si vous créez une barre de progression. Directement basé sur la plage d'entrée, le style Certaines parties nécessitent de nombreux ajustements et traitements de compatibilité. Même si cela est fait, si l'apparence doit être modifiée à l'avenir, cela posera beaucoup de problèmes.

Sur la base des deux raisons ci-dessus, nous avons créé un système capable de répondre aux événements de saisie et de modification (c'est-à-dire que l'une consiste à faire glisser la barre de progression quelque part et l'autre à cliquer sur une certaine position du barre de progression pour changer sa valeur à cette position) Le composant Vue implémenté par p répond non seulement à la demande d'événements de barre de progression, mais apporte également l'avantage d'une modification de style pratique si les exigences changent.

Rendu

Ceux-ci ci-dessus sont quelques-uns des effets qui peuvent être obtenus à l'aide de ce composant. Ils peuvent répondre à la fois aux événements d'entrée et de changement.

La première partie est la partie modèle

Regardez attentivement l'image ci-dessus. Comment construire le modèle HTML doit encore être réfléchi. Je l'ai également modifié plusieurs fois et j'ai finalement réglé. sur celle-ci. Tout d’abord, il y a une couche d’externalisation dont je ne parlerai pas. Ensuite, il y a un p avec class = 'progress' sous le p d'externalisation. Le p à l'intérieur de ce p signifie que la barre de progression a traversé la pièce (class="left") Le p avec class="left" contient également un p indiquant que. La boule coulissante que l'on peut faire glisser.

Laissez-moi parler des avantages. Avec ce genre de structure et de style, lorsque vous vérifiez les éléments sur la page, vous pouvez clairement voir que chaque p chevauche la partie affichée sur la page.

Si votre barre de progression représente p sur toute la longueur, p représente la moitié gauche et p représente le curseur, ce n'est pas une structure imbriquée comme la mienne, mais une relation de nœud frère, vous devez utiliser des styles pour faites Position relative et déplacez les deux derniers nœuds frères vers le haut, de sorte que lorsque l'élément est coché, les cases des autres composants situées sous la barre de progression pénètrent dans la zone de la barre de progression. Bien que l'utilisateur ne vérifie pas les éléments, il ne sera pas pratique pour les programmeurs de les observer par eux-mêmes après une longue période, n'est-ce pas ?

En d'autres termes, nous espérons tous que les éléments exprimés par la structure HTML et l'espace réservé de chaque élément affiché lors de l'inspection de l'élément sont cohérents. Cela peut également être considéré comme un indicateur d’évaluation pour savoir si votre structure HTML est raisonnablement construite.

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

partie js

Pour les étudiants qui ont besoin d'utiliser cette barre de progression avec des événements maintenant, jetez un œil à cette partie pour vous aider à la modifier vous-même, parfait il.

Pour les étudiants qui souhaitent essayer ce composant en premier, vous pouvez sauter la lecture de cette partie. Lorsque vous constatez que le composant n'est pas assez fonctionnel, il ne sera pas trop tard pour regarder cette partie du 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;;
  },
 }

Installer et utiliser

Adresse

L'adresse de la base de code est sur GitHub

Installer et utiliser

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

Cas d'utilisation :

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

accessoires de composants

• leftBg : La barre de progression a traversé une partie de la couleur d'arrière-plan

• bgc : La barre de progression n'a pas traversé une partie de la couleur d'arrière-plan

• ballBgc : Couleur d'arrière-plan du curseur

• largeur : le pourcentage de la largeur de la barre de progression dans le composant parent, transmettre la valeur en pourcentage

• hauteur : la hauteur de la barre de progression, passer la valeur des pixels

• max : valeur maximale de la barre de progression

• min : minimum valeur

• valeur : valeur actuelle

Événement

• pbar-drag : Déclenché lors du déplacement de la barre de progression, renvoie la valeur et le pourcentage de réussite

• pbar-drag : Déclenché lorsqu'une certaine position de la barre de progression est cliquée, renvoie la valeur et pourcentage

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser les éléments Dom dans jQuery ?

Quelles sont les fonctions de tableau couramment utilisées en js ?

À propos de l'utilisation de Datepicker dans vue2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!