How to implement global Loading effect in Vue

How to implement global Loading effects in Vue

In Vue development, implementing global Loading effects is a common requirement. The global Loading effect can give users a good prompt to let them know that the page is loading, improving the user experience. This article will introduce how to implement global Loading effects in Vue and provide specific code examples.

1. Create a global Loading component

First, we need to create a global Loading component. This component can be a simple loading animation, such as a rotating Loading icon. You can use third-party UI libraries, such as Element UI or the Loading component provided by Ant Design Vue. The following is an example:

<template>
  <div class="global-loading">
    <el-loading :visible="visible" text="加载中..."></el-loading>
  </div>
</template>

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

<style scoped>
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

In this component, we use the el-loading component provided by Element UI, and control the display and loading of Loading through the visible attribute hide.

2. Use the global Loading component in App.vue

Next, we need to use the global Loading component in App.vue, and Show and hide it when needed. Communication between components can be achieved using Vue's event bus mechanism. The specific implementation is as follows:

<template>
  <div id="app">
    <router-view></router-view>
    <GlobalLoading ref="globalLoading"></GlobalLoading>
  </div>
</template>

<script>
import GlobalLoading from './components/GlobalLoading.vue'

export default {
  components: {
    GlobalLoading
  },
  mounted() {
    this.$bus.$on('show-loading', () => {
      this.$refs.globalLoading.show()
    })
    this.$bus.$on('hide-loading', () => {
      this.$refs.globalLoading.hide()
    })
  },
  beforeDestroy() {
    this.$bus.$off('show-loading')
    this.$bus.$off('hide-loading')
  }
}
</script>

In this example, we introduce the global Loading component and give it a name using the ref attribute. In the mounted hook function, we use the $on method of the event bus to listen to the show-loading and hide-loading events, and The corresponding callback function calls the show and hide methods of the global Loading component to show and hide the Loading.

3. Trigger the global Loading effect in other components

To trigger the global Loading effect in other components, we can use the $emit of the event bus Method to trigger the show-loading and hide-loading events. The following is an example:

<template>
  <div>
    <h1 id="这是其他组件">这是其他组件</h1>
    <button @click="startLoading">开始加载</button>
    <button @click="stopLoading">停止加载</button>
  </div>
</template>

<script>
export default {
  methods: {
    startLoading() {
      this.$bus.$emit('show-loading')
    },
    stopLoading() {
      this.$bus.$emit('hide-loading')
    }
  }
}
</script>

In this example, we call the $emit method to trigger show-loading and ## in the click events of the two buttons respectively. #hide-loading event, thereby triggering the display and hiding of the global Loading effect.

Through the above steps, we can achieve the global Loading effect in Vue. When the global Loading effect is needed, we only need to trigger the event in the corresponding component, and the global Loading component will be displayed, giving the user a good prompt. For specific effects, please refer to the actual running sample code.

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!