So implementieren Sie eine ereignisgesteuerte Fortschrittsbalkenkomponente in Vue

In diesem Artikel wird hauptsächlich der Beispielcode der ereignisgesteuerten Fortschrittsbalkenkomponente vorgestellt. Er ist sehr gut und hat Referenzwert.

Schreiben Sie ihn Vorne

Ich habe viele Vue-Fortschrittsbalkenkomponenten gefunden, von denen keine Drag-and-Click-Ereignisse enthält. Der Eingabebereich enthält nativ Eingabe- und Änderungsereignisse, aber wenn Sie einen Fortschrittsbalken erstellen Direkt basierend auf dem Eingabebereich und dem Stil. Einige Teile erfordern viele Anpassungen und Kompatibilitätsverarbeitung. Selbst wenn dies geschehen ist und das Erscheinungsbild in Zukunft geändert werden muss, wird dies große Probleme verursachen.

Basierend auf den beiden oben genannten Gründen haben wir ein System entwickelt, das auf Eingabe- und Änderungsereignisse reagieren kann (das heißt, zum einen wird der Fortschrittsbalken irgendwohin gezogen und zum anderen wird auf eine bestimmte Position geklickt). Die von p implementierte Vue-Komponente erfüllt nicht nur die Nachfrage nach Fortschrittsbalkenereignissen, sondern bietet auch den Vorteil einer bequemen Stiländerung, wenn sich die Anforderungen ändern.

Rendering

Die oben genannten Effekte sind einige der Effekte, die mit dieser Komponente erzielt werden können. Sie können sowohl auf Eingabe- als auch auf Änderungsereignisse reagieren.

Zuerst ist der Vorlagenteil

Schauen Sie sich das Bild oben genau an, ich habe es auch mehrmals geändert und bin schließlich fertig auf dieser Struktur. Zunächst einmal gibt es eine Ebene des Outsourcings, über die ich nicht sprechen werde. Dann gibt es ein p mit class = 'progress' unter dem ausgelagerten p. Das p in diesem p bedeutet, dass der Fortschrittsbalken überschritten wurde (class="left"). Das p mit class="left" enthält auch ein p, das anzeigt, dass The Slider-Ball, den wir ziehen können.

Lassen Sie mich über die Vorteile einer solchen Struktur und des erstellten Stils sprechen. Wenn Sie die Elemente auf der Seite überprüfen, können Sie deutlich erkennen, dass sich jedes p mit dem auf der Seite angezeigten Teil überschneidet.

Wenn Ihr Fortschrittsbalken p der gesamten Länge darstellt, p die linke Hälfte darstellt und p den Schieberegler darstellt, handelt es sich nicht um eine verschachtelte Struktur wie meine, sondern um eine Geschwisterknotenbeziehung, für die Sie Stile verwenden müssen Führen Sie eine relative Position aus und verschieben Sie die letzten beiden Geschwisterknoten nach oben, sodass beim Aktivieren des Elements die Kästchen anderer Komponenten unterhalb des Fortschrittsbalkens in den Bereich des Fortschrittsbalkens eindringen. Obwohl Benutzer keine Elemente inspizieren, ist es für Programmierer nicht bequem, sie nach längerer Zeit selbst zu beobachten, oder?

Mit anderen Worten, wir alle hoffen, dass die Elemente, die durch die HTML-Struktur ausgedrückt werden, und der Platzhalter jedes Elements, der bei der Überprüfung des Elements angezeigt wird, konsistent sind. Dies kann auch als Bewertungsindikator dafür angesehen werden, ob Ihre HTML-Struktur sinnvoll aufgebaut ist.

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

Für Schüler, die diesen Fortschrittsbalken jetzt mit Ereignissen verwenden müssen, werfen Sie einen Blick auf diesen Teil, um ihn selbst zu ändern und zu verbessern.

Für Schüler, die diese Komponente zuerst ausprobieren möchten, können Sie das Lesen dieses Teils überspringen. Wenn Sie feststellen, dass die Komponente nicht funktionsfähig genug ist, ist es nicht zu spät, sich diesen Teil des Codes anzusehen.

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;;
  },
 }

Installieren und verwenden

Adresse

Die Code-Basisadresse ist auf GitHub installiert

, verwenden Sie

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

Anwendungsfall:

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

Komponenten-Requisiten

• leftBg: Fortschritt Der Balken hat einen Teil der Hintergrundfarbe überschritten

• bgc: Der Fortschrittsbalken hat einen Teil der Hintergrundfarbe nicht überschritten

• ballBgc : Hintergrundfarbe des Schiebereglers

• Breite: der Prozentsatz der Breite der übergeordneten Komponente des Fortschrittsbalkens, übergeben Sie den Prozentwert

• Höhe: die Höhe des Fortschrittsbalkens, übergeben Sie den Pixelwert

• max: Maximalwert des Fortschrittsbalkens

• min: Minimalwert

• Wert: Aktueller Wert

Ereignis

• pbar-drag: Wird beim Ziehen des Fortschrittsbalkens ausgelöst und gibt Wert und Prozentwert zurück.

• pbar-drag: Wird ausgelöst, wenn auf eine bestimmte Position des Fortschrittsbalkens geklickt wird, sowie den Wert und den Prozentwert werden zurückgegeben

Das Obige habe ich für alle zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Wie verwende ich Dom-Elemente in jQuery?

Was sind die häufig verwendeten Array-Funktionen in js?

Informationen zur Verwendung des Datepickers in vue2.0

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine ereignisgesteuerte Fortschrittsbalkenkomponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!