Vue でイベント応答型プログレスバーコンポーネントを実装する方法

この記事では主に Vue のイベント応答プログレス バー コンポーネントのサンプル コードを紹介します。非常に優れており、必要な友人は参考にしてください。

たくさんの vue を見つけました。プログレス バー コンポーネントにはドラッグ アンド クリック イベントは含まれませんが、入力範囲には入力イベントと変更イベントがネイティブに含まれます。ただし、入力範囲に直接基づいてプログレス バーを作成する場合、スタイル パーツには多くの調整と互換性の処理が必要になります。たとえそれができたとしても、将来的に外観を変更する必要がある場合は、非常に面倒になります。 上記の 2 つの理由に基づいて、入力および変更イベントに応答できる p の Vue 実装を作成しました (つまり、1 つはプログレス バーをどこかにドラッグすること、もう 1 つはプログレス バーの特定の位置をクリックすることです)このコンポーネントは、プログレス バー イベントの需要を満たすだけでなく、要件が変化した場合に便利なスタイル変更の利点ももたらします。

レンダリング

上記は、このコンポーネントを使用して実現できる効果の一部です。入力イベントと変更イベントの両方に応答できます。

まずはテンプレート部分です

HTMLテンプレートの構造をどうするかはまだ検討が必要ですが、何度か変更を加えて最終的にこの構造に落ち着きました。まず、アウトソーシングの層がありますが、これについては触れません。次に、アウトソーシング p の下に class = 'progress' の p があります。この p 内の p は、プログレス バーがその部分 (class="left") を横切ったことを意味します。class="left" の p にも、それを示す p が含まれています。ドラッグできるスライダーボール。 このような構造とスタイルを使用すると、ページ上の要素を確認すると、各 p がページに表示されている部分と重なっていることがはっきりとわかります。

プログレスバーが全体の長さの p を表し、p が左半分を表し、p がスライダーを表す場合、それは私のような入れ子構造ではなく、兄弟ノード関係であるため、相対的な位置決めにスタイルを使用する必要があります。 2 つの兄弟ノードが上に移動するため、要素がチェックされると、進行状況バーの下にある他のコンポーネントのボックスが進行状況バーの領域に侵入します。ユーザーは要素を検査することはありませんが、プログラマが時間をかけて自分で観察するのは不便ですよね。

つまり、HTML 構造で表現される要素と、要素をチェックするときに表示される各要素のプレースホルダーが一致していることを誰もが望んでいます。 HTMLの構造が合理的に構築されているかどうかの評価指標とも言えます。

<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 パート

今すぐイベントでこの進行状況バーを使用する必要がある学生は、このパートを参照して、自分で変更して改善するのに役立ててください。 最初にこのコンポーネントを試してみたい学生の場合は、このコンポーネントの機能が不十分であることがわかったら、この部分を無視しても問題ありません。

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

インストールして使用します

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>

コンポーネントの小道具

leftBg: 進捗状況バーは背景色の一部を越えています

• bgc: プログレスバーは背景色の一部を越えていません

• ballBgc: スライダーの背景色

• width: プログレスバーは、スライダーの幅のパーセンテージを占めます。親コンポーネント、パーセント値を渡します

• height: プログレスバーの高さ、ピクセル値を渡します

• max: プログレスバーの最大値

• min: 最小値

• value: 現在の値

event

pbar-drag: プログレスバーをドラッグするとトリガーされ、値とパーセント値を返します

• pbar-drag: プログレスバーの特定の位置がクリックされたときにトリガーされ、値とパーセント値

• 上記は私がまとめたものです。今後、皆様のお役に立てれば幸いです。

関連記事:

jQuery で Dom 要素を使用するには?

jsでよく使われる配列関数は何ですか?

vue2.0でのdatepickerの使い方について

以上がVue でイベント応答型プログレスバーコンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。