Vue 표시기 사용 방법

Vue 표시기는 페이지 로딩이나 처리 진행 상황을 표시하는 데 사용되는 구성 요소입니다. 이는 사용자에게 무엇을 기다리고 있는지, 얼마나 기다려야 하는지 알려주는 피드백을 제공하기 때문에 매우 유용합니다. 이번 글에서는 Vue 인디케이터 사용법을 소개하겠습니다.

1. Vue 표시기 설치

Vue 표시기를 사용하기 전에 먼저 설치해야 합니다. 프로젝트 요구 사항 및 요구 사항에 따라 여러 가지 옵션을 사용할 수 있습니다. 한 가지 옵션은 npm 패키지 관리자를 통해 설치하는 것입니다.

vue-spinner를 설치하려면 터미널에서 다음 명령을 실행하세요.

npm install vue-spinner --save

프로젝트에서 Yarn을 패키지 관리자로 사용하는 경우 다음 명령을 사용하여 설치할 수도 있습니다.

yarn add vue-spinner

2. Vue 표시기 소개

Once vue - 스피너가 설치되었으므로 이제 Vue 구성 요소에 이를 도입해야 합니다. 특정 구성 요소, 페이지 수준 또는 앱 항목 파일에 도입할 수 있습니다.

일반적으로 다음과 같이 스크립트 태그에 도입합니다.

<template>
  <div>
    <BounceLoader />
  </div>
</template>

<script>
import { BounceLoader } from 'vue-spinner'

export default {
  components: {
    BounceLoader
  }
}
</script>

이 예에서는 템플릿에 매우 간단한 컨테이너 div를 사용하고 BounceLoader를 추가했습니다. 스크립트 태그에서 먼저 vue-spinner의 BounceLoader 구성 요소를 참조하고 있음을 명확하게 나타냅니다. 그런 다음 이를 현재 구성 요소에 구성 요소로 추가합니다.

3. 페이지에서 사용

Vue 구성 요소에 vue-spinner를 도입한 후 이제 템플릿에서 직접 사용할 수 있습니다. 여기서는 BounceLoader 구성 요소가 사용되는 예를 보여 드리겠습니다. 이는 다른 콘텐츠가 로드될 때 나타나는 매우 멋진 애니메이션 로딩 표시기입니다.

<template>
  <div>
    <BounceLoader />
    <p>内容正在加载，请稍候...</p>
  </div>
</template>

이 코드에서는 BounceLoader 구성 요소를 간단한 div로 래핑하고 그 아래에 설명 텍스트를 추가하여 사용자에게 로드되는 내용을 알려줍니다.

이것은 간단합니다. 원하는 경우 BounceLoader 대신 더 복잡한 표시기를 사용할 수 있습니다.

4. 표시기 사용자 정의 가능성

Vue 표시기는 사용자 정의가 가능합니다. 다양한 매개변수를 설정하여 표시기의 크기, 색상, 속도 등을 사용자 정의할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 매개변수입니다.

색상 번호 0 표시기 모서리 반경loadingTextString'로드 중...'표시기에 텍스트 프롬프트가 표시되는지 여부loadingTextStyleObject{}사용자 정의 가능한 텍스트 스타일 표시기가 더 멋져 보이도록 하려면 구성 요소에 사용자 정의 스타일을 추가할 수 있습니다. 이 예에서는 BounceLoader 표시기에 다음 스타일을 추가했습니다.

<template>
  <div class="loading-container">
    <BounceLoader 
      :size="50" 
      :color="'#FFA500'" 
      :margin="'20px'" 
      :radius="10" 
      :loadingText="false" 
      :loadingTextStyle="textStyle" 
    />
  </div>
</template>

<script>
import { BounceLoader } from 'vue-spinner'

export default {
  components: {
    BounceLoader
  },
  data: function() {
    return {
      textStyle: {
        fontSize: '20px',
        color: '#FFA500'
      }
    }
  }
}
</script>

<style>
.loading-container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

이름	유형	기본값	설명
size	Number	35	표시기의 크기(픽셀)
이 예에서는 먼저 BounceLoader 구성 요소를 둘러싸는 div 컨테이너를 정의하고 이에 대한 스타일을 정의합니다. 높이를 100vh로 설정하고 Flexbox 레이아웃을 사용하여 BounceLoader 구성 요소를 중앙에 배치했습니다. 또한 크기, 색상, 여백 등과 같은 사용되는 일부 사용자 정의 속성도 설정합니다.	요약하자면, Vue 표시기는 사용자에게 무슨 일이 일어나고 있는지 알려주는 매우 유용한 도구입니다. Vue 표시기는 다양한 스타일과 크기로 제공되며 다양한 유형의 프로젝트에 사용하기에 적합합니다. 사용자 정의 속성을 사용하여 표시기를 사용자 정의하여 디자인 스타일에 맞는 모양을 얻을 수 있습니다.

위 내용은 Vue 표시기 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!