Vue에서 전역 로딩 효과를 구현하는 방법-View.js-php.cn

Vue에서 전역 로딩 효과를 구현하는 방법

PHPz

풀어 주다： 2023-11-07 09:18:28

원래의

1157명이 탐색했습니다.

Vue에서 전역 로딩 효과를 구현하는 방법

Vue 개발에서는 전역 로딩 효과를 구현하는 것이 일반적인 요구 사항입니다. 전역 로딩 효과는 사용자에게 페이지가 로딩 중임을 알려주는 좋은 메시지를 제공하여 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 Vue에서 전역 로딩 효과를 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다.

전역 Loading 구성 요소 만들기

먼저 전역 Loading 구성 요소를 만들어야 합니다. 이 구성 요소는 회전하는 로딩 아이콘과 같은 간단한 로딩 애니메이션일 수 있습니다. Element UI 또는 Ant Design Vue에서 제공하는 Loading 컴포넌트와 같은 타사 UI 라이브러리를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

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

로그인 후 복사

이 컴포넌트에서는 Element UI에서 제공하는 el-loading 컴포넌트를 사용하고 visible 속성을 통해 Loading 표시 및 숨기기를 제어합니다. el-loading组件，并通过visible属性控制Loading的显示和隐藏。

在App.vue中使用全局Loading组件

接下来，我们需要在App.vue中使用全局Loading组件，并在需要的时候显示和隐藏它。可以使用Vue的事件总线机制来实现组件之间的通信。具体实现如下：

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

로그인 후 복사

在这个示例中，我们引入了全局Loading组件，并使用ref属性给它起了一个名字。在mounted钩子函数中，我们使用事件总线的$on方法监听show-loading和hide-loading事件，并在对应的回调函数中调用全局Loading组件的show和hide方法来显示和隐藏Loading。

在其他组件中触发全局Loading效果

要在其他组件中触发全局Loading效果，我们可以使用事件总线的$emit方法来触发show-loading和hide-loading事件。下面是一个示例：

<template>
  <div>
    <h1>这是其他组件</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>

로그인 후 복사

在这个示例中，我们分别在两个按钮的点击事件中调用$emit方法触发show-loading和hide-loading

App.vue

ref

마운트된

$on

show-loading

hide-loading 이벤트를 실행하고 해당 콜백 함수에서 전역 Loading 구성 요소의 <code>show

hide

$emit

hide-loading

$emit