svg を使用して vue2 で円形のプログレス バー コンポーネントを開発する方法を段階的に説明します。

この記事では、svg を使用して円形のプログレス バー vue2 コンポーネントを開発する方法について詳しく紹介します。皆様のお役に立てれば幸いです。

通常の長方形のプログレスバーは div css で簡単に実装できますが、円形のプログレスバーは少し面倒です。もちろん、background 属性を使用して div css を使用することもできます。ブラインドメソッドとしてcss3変数で実装することもできますが、互換性や制御が複雑で面倒なので、最良の効果を得るにはsvgを使用する必要があります。 [関連する推奨事項: "vue.js チュートリアル "]

Kangkang の最終的な効果から始めましょう:

自分自身を開発するコンポーネントの利点は、サイズ、色、厚さ、アニメーションなどを任意に拡張できることです。

<script>
export default {
  name: "CircleProgress",
  data() {
    return {     
      now: 0
    };
  },
  props: {
    // 进度值
    value: {
      type: [String, Number],
      default: 0
    },
    // 尺寸
    size: {
      type: [String, Number],
      default: 120
    },
    // 边框粗细
    strokeWidth:{
      type: [String, Number],
      default: 10
    },
    // 进度条颜色
    color: {
      type: String,
      default: "rgba(153,202,251,1)"
    },
    // 动画执行时间
    duration:{
      type: [String, Number],
      default: 1000
    }
  },
  computed: {
    percentage() {
      return this.value;
    },
    countDown() {
      return this.now;
    },
    // 圆心x轴坐标
    cx() {
      return this.size / 2;
    },
    // 圆心y轴坐标  
    cy() {
      return this.size / 2;
    },
    // 半径
    radius() {
      return (this.size - this.strokeWidth) / 2;
    },
    // 圆周长
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    // 进度长度  
    progress() {
      return (1 - this.now / 100) * this.circumference;
    }
  },
};
</script>

ログイン後にコピー

2. 構造とスタイル

<template>
  <div class="circle-main">
    <div class="circle-main-box" :style="[{ &#39;width&#39;: size+&#39;px&#39;,&#39;height&#39;: size+&#39;px&#39;}]">
      <svg :width="size" :height="size" class="circle">
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          stroke="#EEEEEE"
          :stroke-width="strokeWidth"
        />
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          :stroke="color"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="progress"
        />
      </svg>
      <span class="count-num" :style="[{ &#39;font-size&#39;: size*.3+&#39;px&#39;}]">{{countDown}}%</span>
    </div>
  </div>
</template>

その後、CSS を記述する必要があります。SVG リングは私たちが考えているように 0 度から開始せず、90 度オフセットされているため、CSS を記述する必要があります。

つまり、CSS を使用して 90 度回転する必要があります。

.circle {
  transform: rotate(-90deg);
}

次に、テキストとメインフレームのいくつかのスタイルを記述します。

.circle-main-box {
  position: relative;
  display: block;
  margin: 0 auto;
}
.count-num {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  align-items: center;
  justify-content: center;
  display: flex;
  font-family: fantasy;
  font-size: 30px;
  color: #333;
  user-select: none;
}

#このようにして、静的な円形の進行状況バーが表示されます。

3. アニメーションと使用

<script>
export default {
  name: "CircleProgress",
  // ...
  mounted() {
    this.run();
  },
  methods: {
    run() {
      if (this.value == 0) return;
      let t = this.duration / this.value
      this.timer = setInterval(() => {
        if (this.now >= this.value) {
          return clearInterval(this.timer);
        }
        this.now++;
      }, t);
    }
  }
};

<div id="app">
    <CircleProgress :value="60" :size="150" :color="&#39;#d36&#39;"  :duration="3000" />
</div>

ログイン後にコピー

プログラミング関連の知識については、プログラミング ビデオ

以上がsvg を使用して vue2 で円形のプログレス バー コンポーネントを開発する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。