Vue で円形プログレスバーを実装する例

<テンプレート>
 <div class="content" ref="box">
 <svg スタイル="transform: rotate(-90deg)" :width="width" :height="width" xmlns="http://www.w3.org/2000/svg">
  <circle :r="(幅-半径)/2"
  :cy="幅/2"
  :cx="幅/2"
  :stroke-width="半径"
  :stroke="背景色"
  塗りつぶし="なし"
  />
  <circle ref="$bar"
  :r="(幅-半径)/2"
  :cy="幅/2"
  :cx="幅/2"
  :stroke="バー色"
  :stroke-width="半径"
  :stroke-linecap="isRound ? 'round' : 'square'"
  :stroke-dasharray="(幅-半径)*3.14"
  :stroke-dashoffset="isAnimation ? (幅-半径) * 3.14 : (幅 - 半径) * 3.14 * (100 - 進行状況) / 100"
  塗りつぶし="なし"
  />
 </svg>
 <div class="center_text" :style="{color, fontSize}">
  <p v-if="!$slots.default" class="title">{{進捗状況}}%</p>
  <スロット></スロット>
 </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具: {
 半径：
  タイプ: [数値、文字列],
  デフォルト: 20
 }, // プログレスバーの太さ progress: {
  タイプ: [数値、文字列],
  デフォルト: 20
 }, // 進捗バーのパーセンテージ barColor: {
  タイプ: 文字列、
  デフォルト: "#1890ff"
 }, // 進捗バーの色 backgroundColor: {
  タイプ: 文字列、
  デフォルト: "rgba(0,0,0,0.3)"
 }, // 背景色 isAnimation: {
  // アニメーション効果のタイプ: ブール値、
  デフォルト: true
 },
 ラウンド: {
  // 円形ブラシタイプかどうか: ブール値、
  デフォルト: true
 },
 id: {
  // 複数のコンポーネントが共存する場合に使用されるコンポーネントID type: [String, Number],
  デフォルト: 1
 },
 間隔： {
  // アニメーション全体の継続時間 type: [String, Number],
  デフォルト: 1000
 },
 遅れ：
  // 実行を遅らせる時間 type: [String, Number],
  デフォルト: 200
 },
 時間関数: {
  // アニメーションイージング関数の型: 文字列、
  デフォルト: "cubic-bezier(0.99, 0.01, 0.22, 0.94)"
 },
 円の幅: {
  //リング幅タイプ: 数値、
  デフォルト: 100、
 },
 色：
  //テキストカラータイプ: 文字列、
  デフォルト: '#000'
 },
 フォントサイズ: {
  //テキストサイズタイプ: 文字列、
  デフォルト: '18px'
 }
 },
 データ（） {
 戻る {
  幅: this.circleWidth、
  idStr: `circle_progress_keyframes_${this.id}`
 };
 },
 破棄する前に() {
 // 古いコンポーネントのスタイルタグをクリアします document.getElementById(this.idStr) &&
 ドキュメントの要素を削除します。
 ウィンドウにイベントリスナーを追加します(() => {});
 },
 マウント() {
 自分自身 = this とします。
 this.setCircleWidth();
 アニメーションを設定します。
 // window.onresize はここでは使用できない
 ウィンドウにイベントリスナーを追加します(
  「サイズ変更」、
  デバウンス(関数() {
  自己.setCircleWidth();
  アニメーションを設定します。
  }, 300)
 );
 },
 メソッド: {
 setCircleWidth() {
  box = this.$refs.box; とします。
  幅をbox.clientWidthとします。
  高さをbox.clientHeightとします。
  cW = 幅 > 高さ ? 高さ : 幅 とします。
  幅 = cW;
 },
 アニメーションを設定する() {
  自分自身 = this とします。
  アニメーションが動作している場合
  // 定義を繰り返します if (document.getElementById(self.idStr)) {
   console.warn("vue-circle-progress は同じ ID スタイルを持つことはできません");
   ドキュメントの要素をIDで取得します。
  }
  // アニメーション スタイル ファイルを生成します。let style = document.createElement("style");
  スタイルID = self.idStr;
  スタイルの種類 = "text/css";
  スタイル.innerHTML = `
  @keyframes サークル_進行状況_keyframes_name_${self.id} {
  {stroke-dashoffset: ${(self.width - self.radius) * 3.14}px;} から
  {stroke-dashoffset: ${((self.width - self.radius) *
  3.14 *
  (100 - 自己進歩)) /
  100}ピクセル;}}
  .circle_progress_bar${
  自己ID
  } {アニメーション:circle_progress_keyframes_name_${self.id} ${
   自己持続時間
  }ms ${self.delay}ms ${self.timeFunction} 前進;}`;
  // 新しいスタイルファイルを追加します document.getElementsByTagName("head")[0].appendChild(style);
  // svg要素にアニメーションクラスを追加
  self.$refs.$bar.classList.add(`circle_progress_bar${self.id}`);
  }
 }
 }
};
</スクリプト>
<スタイルスコープ>
.content {height:100%;display:flex;justify-content:center;align-items:center;}
.center_text {位置:絶対;}
</スタイル>

<CircleProgress :id="'circle1'" :circleWidth="40" :radius="7" :progress="30" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FF4F4F'" />
<CircleProgress :id="'circle2'" :circleWidth="40" :radius="7" :progress="50" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FF902A'" />
<CircleProgress :id="'circle3'" :circleWidth="40" :radius="7" :progress="89" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FFDB4F'" />
<CircleProgress :id="'circle4'" :circleWidth="40" :radius="7" :progress="25" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#B8D87E'" />

関数 debounce(func, wait, immediate) {
 タイムアウト、引数、コンテキスト、タイムスタンプ、結果

 const later = 関数() {
 // 最後のトリガー時間間隔に従って const last = +new Date() - timestamp

 // ラップされた関数が最後に呼び出されたとき、時間間隔 last は設定された時間間隔 wait よりも短い
 （最後が<待機&&最後> 0）の場合{
  タイムアウト = setTimeout(later, wait - last)
 } それ以外 {
  タイムアウト = null
  //immediate===true に設定されている場合、開始境界がすでに呼び出されているため、ここで呼び出す必要はありません if (!immediate) {
  結果 = func.apply(コンテキスト、引数)
  if (!timeout) コンテキスト = 引数 = null
  }
 }
 }