VUE3 basic tutorial: Use Vue.js plug-in to encapsulate the progress bar component

In web development, the progress bar component is a common UI component used to display the progress of tasks or page loading. In Vue.js, based on its powerful componentization feature, we can easily encapsulate custom progress bar components and encapsulate them as plug-ins for reuse in various Vue.js applications. This article will demonstrate how to use the Vue.js plug-in to encapsulate the progress bar component through a complete Vue.js progress bar component example.

VUE3 Basic Tutorial: Use the Vue.js plug-in to encapsulate the progress bar component

1. First introduction to the Vue.js progress bar component

The Vue.js progress bar component is not just A simple UI component is an indispensable and important component in the background management system. Today we will use a demonstration of the Vue.js progress bar component to learn how to use the Vue.js plug-in to encapsulate the progress bar component.

First, we need to define a progress bar component, which includes 3 main components: top progress bar, bottom progress bar, and right status icon. The following is the HTML and CSS code snippet of this component:

<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;
}

The corresponding function of this component is to display a progress bar and provides two parameters: value is used to adjust the width of the progress bar (0 ~ 100), color Used to adjust the color of the progress bar.

2. Use Vue.js to implement the basic logic of the progress bar component

Next, we use Vue.js to bind the dynamic data of the progress bar component and implement the basic logic of the component .

First, we define two variables in the data attribute of the Vue component: progressValue and progressColor. The former is used to bind the width of the progress bar, and the latter is used to bind the color of the progress bar.

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

Next, in the template attribute of the component, we dynamically render the HTML code of the progress bar component based on the variables defined in the data attribute. Mainly by binding the value of progressValue, the width of the progress bar changes dynamically as the data is updated:

<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>

Finally, in the methods attribute of the component, we define an update method, in which Obtain the initial data of the current progress bar through Ajax asynchronous request, and call the updateProgress method to update the component data:

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;
    }
  }
}

Now, our Vue.js progress bar component can already pass the update method and implement basic data binding fixed and dynamically updated.

3. Use the Vue.js plug-in to encapsulate the progress bar component

After the previous simple implementation, we have obtained a usable Vue.js progress bar component code. Next, we will encapsulate this code into a Vue.js plug-in.

First, we need to create a new VProgress plug-in in our Vue.js project, and define the global install method in the index.js file of the plug-in to register the Vue.js progress bar component. :

import VProgress from './vprogress.vue';

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

export default install;

On this basis, we can also provide additional global configuration items and global registration methods for the plug-in. For example, we define a global configuration item for the plug-in:

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;

We add a global configuration item for the plug-in. The default color is the color of the progress bar, and delay is the interval between two updates. Each time we update the progress bar, we can update the value and color values ​​of the progress bar through global methods such as the Vue.prototype.$vprogress.update method, and we can control the update interval through Vue.prototype.$vprogress.delay time.

Finally, we package the above code and generate a usable VProgress plug-in instance for use in various Vue.js projects.

4. Using the Vue.js progress bar component

Now, we use the VProgress plug-in in the new Vue.js project. The method of use is very simple. You only need to register through the Vue.use() method in the entry file main.js of the Vue application:

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

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

Here, we can also pass the Vue.use() method. Enter an options object to override the default VProgress plug-in configuration items.

Next, in the template, we only need to use the VProgress component directly and call the $vporgress.update method to update the value and color values ​​of the progress bar:

<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>

We use the setInterval method Automatically update the value of the progress bar. The interval is fixed by $vprogress.delay. Each time the progress bar updates data, the value and color parameters of the progress bar will be automatically updated according to the global configuration items of the plug-in and the local configuration of the project. The color and delay time of the progress bar are updated accordingly.

5. Summary

Through the above demonstration, we learned how to use the Vue.js plug-in to encapsulate the progress bar component and reuse it in the Vue.js application. The code examples in this article are intended to help readers who are new to Vue.js quickly understand the basic implementation methods of Vue.js plug-ins and the basic implementation logic of the progress bar component, laying the foundation for later development of custom components and plug-ins.

The above is the detailed content of VUE3 basic tutorial: Use Vue.js plug-in to encapsulate the progress bar component. For more information, please follow other related articles on the PHP Chinese website!