Vue を使用してプログレスサークルの特殊効果を実装する方法-Vue.js-php.cn

Vue を使用してプログレスサークルの特殊効果を実装する方法

WBOY

リリース： 2023-09-22 09:03:34

オリジナル

972 人が閲覧しました

Vue を使用してプログレスサークルの特殊効果を実装する方法

Vue を使用して進行状況サークル効果を実装する方法

はじめに:
Web 開発では、進行状況サークル効果は、読み込みの進行状況、カウントダウンなどを表示するためによく使用されます。シナリオ。人気のフロントエンドフレームワークとして、Vue はさまざまな特殊効果を簡単に実装できる豊富なツールとライフサイクルフック機能を提供します。この記事では、Vue を使用して単純な進行状況サークル効果を実装する方法を紹介し、関連するコード例を示します。

1. プロジェクトの初期化
まず、Vue プロジェクトを作成する必要があります。 Vue-CLI を使用すると、基本的なプロジェクトのスケルトンをすばやく構築できます。コマンドラインで次のコマンドを実行します。

npm install -g @vue/cli
vue create progress-circle-demo
cd progress-circle-demo
npm run serve

ログイン後にコピー

上記のコマンドは、Vue-CLI をグローバルにインストールし、progress-circle-demo という名前のプロジェクトを作成し、開発サーバーを起動します。

2. コンポーネントの作成
プログレスサークルコンポーネントのコアコードとして、ProgressCircle.vue という名前のファイルを src ディレクトリに作成します。具体的なコードは次のとおりです。

<template>
  <div class="progress-circle">
    <div class="circle">
      <div class="mask full"></div>
      <div class="mask half"></div>
      <div class="fill"></div>
    </div>
    <span class="text">{{ progress }}%</span>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
      validator(value) {
        return value >= 0 && value <= 100;
      }
    }
  }
}
</script>

<style scoped>
.progress-circle {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}

.circle {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 50px, 50px, 25px);
}

.full {
  background-color: #ccc;
}

.half {
  background-color: #f60;
}

.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f60;
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform 0.6s ease-out;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #333;
}
</style>

ログイン後にコピー

上記のコードは、HTML 構造を使用してプログレスサークルの効果を実現し、props 属性を通じてプログレス値を受け入れる ProgressCircle コンポーネントを定義します。プログレスサークルは円形のマスクレイヤーと塗りつぶしレイヤーで構成されており、アニメーション効果は塗りつぶしレイヤーの変形属性を変更することで実現されます。

3. コンポーネントを使用する
src ディレクトリの App.vue ファイルに書き込まれたばかりのコンポーネントを使用します。具体的なコードは次のとおりです。

<template>
  <div id="app">
    <ProgressCircle :progress="60" />
  </div>
</template>

<script>
import ProgressCircle from './components/ProgressCircle.vue';

export default {
  name: 'App',
  components: {
    ProgressCircle
  }
}
</script>

ログイン後にコピー

上記のコードでは、ProgressCircle コンポーネントを導入し、それをテンプレートで使用し、進行状況を制御するための progress 属性を渡します。

4. プロジェクトを実行します
これで、コマンドラインで npm runserve コマンドを実行して、開発サーバーを起動できるようになります。ブラウザで http://localhost:8080 を開いて、進行状況サークルの効果を確認します。

概要:
この記事では、Vue を使用してプログレスサークルの特殊効果を実装する方法を、簡単な例を通して紹介します。プロジェクトでは、実際のニーズに応じて、対応するスタイルとロジックの調整を行うことができます。この記事が、Vue でプログレスサークルの特殊効果を実装する方法を理解するのに役立つことを願っています。

参考リンク: