ホームページ > 記事 > ウェブフロントエンド > 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>
<template> <div class="circle-main"> <div class="circle-main-box" :style="[{ 'width': size+'px','height': size+'px'}]"> <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="[{ 'font-size': size*.3+'px'}]">{{countDown}}%</span> </div> </div> </template>実際、これは非常に簡単で、svg を使用して 2 つのリングを記述するだけです。最初のリングは下の灰色の円で、 2 つ目はプログレス バーで、サイズと中心半径の境界線の色を設定し、塗りつぶしの色を同じ名前に変更する必要があります。残りの 2 つの項目ストローク-dasharray とストローク-ダシュオフセットの書き込みが完了しました。 SVG プログレス バーの変更の核心は、今計算されたこれら 2 つの属性、リングの円周と現在の進行状況の長さです。現在の進行状況の値を使用して、現在の長さのパーセンテージを計算し、円形の進行状況バーの変化を実現します。これは非常に簡単です。
つまり、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); } } };各数量 1 から現在のアニメーション実行時間と現在の値までの実行時間を計算し、それを実行します。 setInterval 、進行状況の値に達するまで。いよいよ、このコンポーネントの使用を開始します~~
<div id="app"> <CircleProgress :value="60" :size="150" :color="'#d36'" :duration="3000" /> </div>
以上がsvg を使用して vue2 で円形のプログレス バー コンポーネントを開発する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。