Vue 円形パーセンテージ プログレスバー コンポーネントの機能の実装

<テンプレート>
  <div class="パーセントループ">
    <div class="circle-left">
      <div ref="左コンテンツ"></div>
    </div>
    <div class="circle-right">
      <div ref="rightcontent"></div>
    </div>
    <div class="数値">
      {{パーセント}} %
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  小道具: {
    パーセント数: {
      タイプ: [文字列、数値],
      デフォルト: 0
    },
    speed: { // 推奨値は0～3です
      タイプ: [文字列、数値],
      デフォルト: 1
    }
  },
  データ （） {
    戻る {
      パーセント: 0,
      初期度: 0,
      タイムID: null、
      アニメーション: false
    }
  },
  メソッド: {
    transformToDeg (パーセント) {
      度 = 0 とする
      （パーセント >= 100）の場合{
        度 = 360
      } それ以外 {
        度 = parseInt(360 * パーセント / 100)
      }
      戻る度
    },
    パーセントに変換(度) {
      パーセントを0にする
      （度 >= 360）の場合{
        パーセント = 100
      } それ以外 {
        パーセント = parseInt(100 * 度 / 360)
      }
      リターン率
    },
    rotateLeft (deg) { // 角度が180より大きい場合、アニメーションが実行されます this.$refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)'
    },
    rotateRight (deg) { // 角度が180未満の場合はアニメーションが実行されます this.$refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)'
    },
    回転(度) {
      this.animationing = true
      this.timeId = setInterval(() => {
        if (deg > this.initDeg) { // 増分アニメーション this.initDeg += Number(this.speed)
          （this.initDeg >= 180）の場合{
            this.rotateLeft(this.initDeg)
            this.rotateRight(180) // 2 回渡されたパーセンテージから変換された値がステップ長の整数でなくなり、左右の回転が失敗する可能性がある状況を回避します。
          } それ以外 {
            this.rotateRight(this.initDeg)
          }
        } else { // アニメーションを減らす this.initDeg -= Number(this.speed)
          （this.initDeg >= 180）の場合{
            this.rotateLeft(this.initDeg)
          } それ以外 {
            this.rotateLeft(180) // 2 回渡されたパーセンテージから変換された値がステップ長の整数でなくなり、左右の回転が失敗する可能性がある状況を回避します。
            this.rotateRight(this.initDeg)
          }
        }
        this.percent = this.transformToPercent(this.initDeg) // パーセンテージデータのスクロールアニメーション const remainer = Number(deg) - this.initDeg
        もし (Math.abs(remainer) < this.speed) {
          this.initDeg += 残り
          （this.initDeg > 180）の場合{
            this.rotateLeft(度)
          } それ以外 {
            this.rotateRight(度)
          }
          this.animationFinished()
        }
      }, 10)
    },
    アニメーション終了（）{
      this.percent = this.percentNum // パーセンテージデータのスクロールアニメーション this.animationing = false
      クリア間隔(this.timeId)
      this.$emit('animationFinished') // アニメーションが完了したときのコールバック}
  },
  作成された（）{
    this.goRotate(this.transformToDeg(this.percentNum))
  },
  時計：
    'パーセント数値': 関数 (値) {
      if (this.animationing) 戻り値
      this.goRotate(this.transformToDeg(val))
    }
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
.パーセントループ{
  位置: 相対的;
  幅: 100%;
  高さ: 100%;
  境界線の半径: 50%;
  オーバーフロー: 非表示;
  .circle-left、.circle-right {
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 50%;
    高さ: 100%;
    背景色: 赤;
    オーバーフロー: 非表示;
    &>div {
      幅: 100%;
      高さ: 100%;
      背景色: #8a8a8a;
      変換の原点: 右中央;
      /*遷移: すべて 0.5 秒線形;*/
    }
  }
  .circle-right {
    左: 50%;
    &>div {
      変換の原点: 左中央;
    }
  }
  。番号 {
    位置: 絶対;
    上位：9%
    下位：9%
    左：9％
    右：9%
    背景色: #fff;
    境界線の半径: 50%;
    オーバーフロー: 非表示;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    色: #000;
  }
}
</スタイル>