Vue를 사용하여 진행 서클 특수 효과를 구현하는 방법-View.js-php.cn

Vue를 사용하여 진행 서클 특수 효과를 구현하는 방법

WBOY

풀어 주다： 2023-09-22 09:03:34

원래의

945명이 탐색했습니다.

Vue를 사용하여 진행 서클 특수 효과를 구현하는 방법

Vue를 사용하여 진행률 원 효과를 구현하는 방법

소개:
웹 개발에서 진행률 원 효과는 로딩 진행률, 카운트다운 및 기타 시나리오를 표시하는 데 자주 사용됩니다. 널리 사용되는 프런트엔드 프레임워크인 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. 컴포넌트 작성
Progress Circle 컴포넌트의 핵심 코드로 src 디렉터리에 ProgressCircle.vue라는 파일을 생성합니다. 구체적인 코드는 다음과 같습니다.

<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 구성 요소를 소개하고 이를 템플릿에서 사용하여 진행률을 제어하기 위해 진행 속성을 전달합니다.

4. 프로젝트 실행
이제 명령줄에서 npm run serve 명령을 실행하여 개발 서버를 시작할 수 있습니다. 진행률 원 효과를 보려면 브라우저에서 http://localhost:8080을 엽니다.

요약:
이 글에서는 간단한 예제를 통해 Vue를 사용하여 진행 서클 특수 효과를 구현하는 방법을 소개합니다. 프로젝트에서는 실제 필요에 따라 해당 스타일과 논리를 조정할 수 있습니다. 이 기사가 Vue에서 진행 서클 특수 효과를 구현하는 방법을 이해하는 데 도움이 되기를 바랍니다.

참조 링크: