Progressbar 구성요소 실제 사례 분석

이번에는 Progressbar 컴포넌트의 실제 사례 분석을 가져오겠습니다. Progressbar 컴포넌트의 실제 사용 시 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

Rendering

먼저 아래와 같이 진행률 표시줄 구성요소를 실행했을 때의 효과를 살펴보겠습니다.

진행률 표시줄 구성요소

구현 프로세스

◾ 프로젝트 구성

진행률 표시줄 구성요소는 다음과 같습니다. npm 패키지는 Yeoman을 통해 빌드된 후 Gulp+Webpack을 통해 도구를 빌드합니다. 생성된 작업 디렉터리는 이전 기사와 동일합니다

progressbar. 컴포넌트 작업 디렉토리

◾ 프로그레스바 소스 파일 template

progressbar 컴포넌트는 .vue 파일 형태이며, 템플릿 부분은 다음과 같습니다

progressbar 소스 파일 템플릿 부분

을 분석하면, Progressbar 구성 요소에는 주로 다음과 같은 속성이 있습니다.

1. 유형 변수를 사용하여 경고, 위험, 성공, 정보 등을 제어합니다.

2. 동적인지 여부를 제어하려면 애니메이션 변수를 사용합니다. 현재 값을 제어하려면 값 변수를 사용하세요.

3. 최대 값은 최대 변수 제어를 사용합니다.

4. 값과 최대 값을 통해 계산되는 백분율은 Vue의 계산된 속성입니다.

5. valueText 값에 의해 제어되는 표시된 백분율 값은 Vue의 A 계산 속성입니다

6. ◾ 진행률 표시줄 소스 파일의 스크립트

진행률 표시줄 구성 요소의 스크립트 부분

◾ 진행률 표시줄의 스타일 컴포넌트

스타일 부분에는 먼저 진행률 및 진행률 표시줄 부분을 포함하여 기본 CSS 속성을 살펴보겠습니다.

기본 CSS 부분

그런 다음 CSS 스타일을 살펴보세요. 다양한 색상을 표현하는 CSS 스타일

색을 표현하는 CSS 스타일

마지막으로 애니메이션 효과를 표현하는 CSS 스타일을 살펴보세요

애니메이션 효과를 표현하는 CSS 스타일

◾ 예시

위 단계를 모두 마친 후, 진행률 표시줄 구성 요소를 완료할 수 있습니다. 다음으로 진행률 표시줄 구성 요소를 실행할 수 있으면 기사 효과의 시작을 볼 수 있습니다.

진행률 표시줄 구성 요소 사용

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

base64를 암호화하고 해독하는 방법

JS를 사용하여 지난 7일과 지난 3일을 가져오는 방법

위 내용은 Progressbar 구성요소 실제 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!