How to implement global loading effect in Vue

In front-end development, we often have a scenario: the user needs to wait for the data to be loaded during interaction with the web page. At this time, there is usually a loading effect displayed to remind the user to wait. In the Vue framework, it is not difficult to implement a global loading effect. Let’s introduce how to implement it.

Step one: Create a Vue plug-in

We can create a Vue plug-in named loading, which can be referenced in all Vue instances. In the plug-in, we need to implement the following two methods:

1. show(): used to display the loading effect
2. hide(): Used to hide the loading effect

The following is the code of the loading plug-in:

const Loading = {
  show() {
    // 显示loading效果的代码
  },
  hide() {
    // 隐藏loading效果的代码
  }
}

export default {
  install(Vue) {
    Vue.prototype.$loading = Loading
  }
}

In the above code, we define a file named The object of Loading, which contains methods to show and hide the loading effect. The install() method is used to install the loading object onto the Vue instance so that the object can be referenced in all Vue instances.

Step 2: Implement the loading component

In order to achieve the loading effect, we need to add a loading layer covering the entire screen to the Vue component. This can be achieved through CSS. Specifically, we can dynamically add and delete the DOM elements of the loading layer within the Vue component to display and hide the loading effect. The following is a simple loading component:

<template>
  <div v-if="visible" class="loading-mask">
    <div class="loading-spinner"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

<style>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

In the above code, we define a div layer named loading-mask, which covers the entire page and sets a semi-transparent black background. In loading-mask, we added another div layer named loading-spinner, which is used to display a rotating loading icon. Finally, we defined a visible variable in the data of the Vue component to determine whether the loading layer needs to be displayed.

Step 3: Use loading in the component

Now that we have implemented a basic loading component and a Vue plug-in, we need to use them in the Vue component.

First, introduce the Vue plug-in just created into the Vue component, and add the loading component to the current component:

<template>
  <div>
    <h1>这是一个Vue组件</h1>
    <loading ref="loading"></loading>
  </div>
</template>

<script>
import LoadingPlugin from '@/plugins/loading'
import Loading from '@/components/Loading'

export default {
  name: 'HelloWorld',
  components: {
    Loading
  },
  mounted() {
    this.$loading = this.$refs.loading
  },
  plugins: [
    LoadingPlugin
  ],
  methods: {
    fetchData() {
      this.$loading.show() // 显示loading效果
      // 发送请求
      // ...
      this.$loading.hide() // 隐藏loading效果
    }
  }
}
</script>

In the above code, we first introduce the Vue plug-in created before LoadingPlugin, and then use the components attribute to add the loading component to the current component. In the mounted() method, we assign the instance of the loading component to the $loading property, so that we can call the show and hide methods in the current component to show and hide the loading effect.

Finally, in the fetchData() method, we can call this.$loading.show() to display the loading effect. After the data is loaded, call this. $loading.hide() method to hide it. In this way we successfully achieved a global loading effect.

Summary

In this article, we introduced how to implement a global loading effect in the Vue framework. We created a loading plugin and installed it into the Vue instance so that it can be called in all Vue components. We also implemented a loading component, in which DOM elements are dynamically added and deleted to display and hide the loading effect. Finally, we call the show and hide methods of the $loading object in the Vue component to show and hide the loading effect. This implementation allows us to achieve a good user experience, reduce user waiting time, and improve application performance.

The above is the detailed content of How to implement global loading effect in Vue. For more information, please follow other related articles on the PHP Chinese website!