VUE3 기본 튜토리얼: Vue.js 플러그인을 사용하여 진행률 표시줄 구성요소 캡슐화

웹 개발에서 진행률 표시줄 구성 요소는 작업 진행률이나 페이지 로딩을 표시하는 데 사용되는 일반적인 UI 구성 요소입니다. Vue.js에서는 강력한 구성 요소화 기능을 기반으로 사용자 정의 진행률 표시줄 구성 요소를 쉽게 캡슐화하고 다양한 Vue.js 애플리케이션에서 재사용할 수 있는 플러그인으로 캡슐화할 수 있습니다. 이 기사에서는 Vue.js 플러그인을 사용하여 전체 Vue.js 진행률 표시줄 구성 요소 예제를 통해 진행률 표시줄 구성 요소를 캡슐화하는 방법을 보여줍니다.

VUE3 기본 튜토리얼: Vue.js 플러그인을 사용하여 진행률 표시줄 구성 요소

1. Vue.js 진행률 표시줄 구성 요소에 대한 첫 소개

Vue.js 진행률 표시줄 구성 요소는 단순한 UI 구성 요소가 아닙니다. 뿐만 아니라 백엔드 관리 시스템도 필수적이고 중요한 구성 요소입니다. 오늘 우리는 Vue.js 진행률 표시줄 구성 요소의 데모를 사용하여 Vue.js 플러그인을 사용하여 진행률 표시줄 구성 요소를 캡슐화하는 방법을 알아볼 것입니다.

먼저 상단 진행률 표시줄, 하단 진행률 표시줄, 오른쪽 상태 아이콘 등 3가지 주요 구성 요소를 포함하는 진행률 표시줄 구성 요소를 정의해야 합니다. 다음은 이 구성 요소의 HTML 및 CSS 코드 조각입니다.

<div class="progress">
  <div class="progress-top"></div>
  <div class="progress-bottom"></div>
  <i class="icon"></i>
</div>

.progress {
  position: relative;
  height: 14px;
  margin: 5px 0;
  border-radius: 6px;
  background-color: #f2f2f2;
}

.progress-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #5e72e4;
  transition: width .2s ease-in-out;
  z-index: 2;
}

.progress-bottom {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #fff;
  transition: width .2s ease-in-out;
  z-index: 1;
}

.icon {
  position: absolute;
  top: -5px;
  right: -10px;
  font-size: 18px;
  color: #5e72e4;
}

이 구성 요소의 해당 기능은 진행률 표시줄을 표시하는 것이며 두 가지 매개변수를 제공합니다. 값은 진행률 표시줄의 너비(0 ~ 100)를 조정하는 데 사용됩니다. 색상은 막대의 색상을 조정하는 데 사용됩니다.

2. Vue.js를 사용하여 진행률 표시줄 구성 요소의 기본 논리 구현

다음으로 Vue.js를 사용하여 진행률 표시줄 구성 요소의 동적 데이터를 바인딩하고 구성 요소의 기본 논리를 구현합니다.

먼저 Vue 구성 요소의 데이터 속성에 ProgressValue와 ProgressColor라는 두 가지 변수를 정의합니다. 전자는 진행률 표시줄의 너비를 바인딩하는 데 사용되고 후자는 진행률 표시줄의 색상을 바인딩하는 데 사용됩니다.

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  }
  
  // ...组件的其他属性和方法
}

다음으로 구성 요소의 템플릿 속성에서 데이터 속성에 정의된 변수를 기반으로 진행률 표시줄 구성 요소의 HTML 코드를 동적으로 렌더링합니다. 주로 ProgressValue 값을 바인딩하여 데이터가 업데이트됨에 따라 진행률 표시줄의 너비가 동적으로 변경됩니다.

<template>
  <div class="progress">
    <div class="progress-top" :style="{ width: progressValue + '%' }"></div>
    <div class="progress-bottom"></div>
    <i class="icon" :class="['fa', 'fa-circle-o-notch', 'spin', 'text-'+progressColor]"></i>
  </div>
</template>

마지막으로 구성 요소의 메소드 속성에서 Ajax Get을 통해 비동기 요청이 이루어지는 업데이트 메소드를 정의합니다. 현재 진행률 표시줄의 초기 데이터를 호출하고 updateProgress 메서드를 호출하여 구성 요소 데이터를 업데이트합니다.

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  },
  methods: {
    update() {
      // 模拟Ajax异步请求
      // 返回progressValue范围在0~100之间的随机数
      const progressValue = Math.floor(Math.random() * 100);
      if(progressValue > 0 && progressValue < 100) {
        this.updateProgress(progressValue, this.progressColor);
      }
    },
    updateProgress(value, color) {
      this.progressValue = value;
      this.progressColor = color;
    }
  }
}

이제 Vue.js 진행률 표시줄 구성 요소는 업데이트 메서드를 전달하고 기본 데이터 바인딩 및 동적 업데이트를 구현할 수 있습니다.

3. Vue.js 플러그인을 사용하여 진행률 표시줄 구성요소를 캡슐화합니다

이전의 간단한 구현 후에 사용 가능한 Vue.js 진행률 표시줄 구성요소 코드를 얻었습니다. 다음으로 이 코드를 Vue.js 플러그인으로 캡슐화하겠습니다.

먼저 Vue.js 프로젝트에서 새로운 VProgress 플러그인을 생성하고 Vue.js 진행률 표시줄 구성 요소를 등록하기 위해 플러그인의 index.js 파일에 전역 설치 방법을 정의해야 합니다.

import VProgress from './vprogress.vue';

const install = function(Vue) {
  Vue.component(VProgress.name, VProgress);
}

export default install;

이를 바탕으로 플러그인에 대한 추가 글로벌 구성 항목 및 글로벌 등록 방법도 제공할 수 있습니다. 예를 들어, 이 플러그인에 대한 전역 구성 항목을 정의합니다.

import VProgress from './vprogress.vue';

const defaults = {
  color: '#5e72e4',
  delay: 1000
};

const install = function(Vue, options = {}) {
  const { color, delay } = Object.assign({}, options, defaults);

  Vue.prototype.$vprogress = {
    update(value) {
      VProgress.methods.updateProgress.call({ progressColor: color }, value, color);
    },
    delay
  };

  Vue.component(VProgress.name, VProgress);
}

export default install;

이 플러그인에 대한 전역 구성 항목을 추가합니다. 기본 색상은 진행률 표시줄의 색상이고 지연은 두 업데이트 사이의 간격입니다. 진행률 표시줄을 업데이트할 때마다 Vue.prototype.$vprogress.update 메소드와 같은 전역 메소드를 통해 진행률 표시줄의 값과 색상 값을 업데이트할 수 있으며, Vue.prototype을 통해 업데이트 간격을 제어할 수 있습니다. $vprogress.delay 시간.

마지막으로 위 코드를 패키징하고 다양한 Vue.js 프로젝트에 사용할 수 있는 VProgress 플러그인 인스턴스를 생성합니다.

4. Vue.js 진행률 표시줄 구성 요소 사용

이제 새 Vue.js 프로젝트에서 VProgress 플러그인을 사용합니다. 사용 방법은 매우 간단합니다. Vue 애플리케이션의 main.js 항목 파일에서 Vue.use() 메소드를 통해 등록하기만 하면 됩니다.

import Vue from 'vue';
import VProgress from 'vprogress';

Vue.use(VProgress, {
  color: '#e74c3c',
  delay: 500
});

여기서 Vue를 통해 옵션 객체를 전달할 수도 있습니다. use() 메서드를 사용하여 기본 VProgress 플러그인 구성 항목을 재정의합니다.

다음으로 템플릿에서 VProgress 구성 요소를 직접 사용하고 $vporgress.update 메서드를 호출하여 진행률 표시줄의 값과 색상 값을 업데이트하면 됩니다.

<template>
  <div class="app">
    <v-progress></v-progress>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const { update, delay } = this.$vprogress;
    setInterval(() => {
      const value = Math.round(Math.random() * 100);
      update(value);
    }, delay)
  }
}
</script>

setInterval 메서드를 사용하여 값을 자동으로 업데이트합니다. 진행률 표시줄의 간격은 $vprogress.delay에 의해 고정됩니다. 진행률 표시줄이 데이터를 업데이트할 때마다 진행률 표시줄의 값과 색상 매개변수가 그에 따라 자동으로 업데이트됩니다. 플러그인의 글로벌 구성 항목과 프로젝트의 로컬 구성 항목 및 지연 시간.

5. 요약

위의 데모를 통해 Vue.js 플러그인을 사용하여 진행률 표시줄 구성 요소를 캡슐화하고 Vue.js 애플리케이션에서 재사용하는 방법을 배웠습니다. 이 기사의 코드 예제는 Vue.js를 처음 접하는 독자가 Vue.js 플러그인의 기본 구현 방법과 진행률 표시줄 구성 요소의 기본 구현 논리를 빠르게 이해하고 향후 사용자 정의 개발을 위한 기반을 마련하는 데 도움을 주기 위해 작성되었습니다. 구성 요소 및 플러그인.

위 내용은 VUE3 기본 튜토리얼: Vue.js 플러그인을 사용하여 진행률 표시줄 구성요소 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!