vue自定义全局loading组件

最新推荐文章于 2024-07-19 20:55:59 发布

三更村落

最新推荐文章于 2024-07-19 20:55:59 发布

阅读量3.7k

点赞数 1

分类专栏： vue javascript

本文链接：https://blog.csdn.net/guochao8/article/details/87818303

版权

本文介绍了如何在Vue项目中创建一个自定义全局Loading组件。通过在Vuex中定义loading模块，包括type.js、action.js和store的index.js，实现了通过store.dispatch('showLoading')和store.dispatch('hideLoading')来控制加载状态的显示与隐藏。

摘要由CSDN通过智能技术生成

loading.vue

<template>
  <div class="sync-loding" v-show="getLoading">
    <div class="ldbox">
      <span class="loading"></span>
      <span class="text">加载中...</span>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'

  export default {
    data() {
      return {}
    },
    computed: {
      ...mapGetters({
        getLoading: 'getLoading'
      })
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  .sync-loding, .loding {
    width: 16rem;
    height: 100%;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 0;
    margin-left: -8rem;
    -webkit-overflow-scrolling: none;
    pointer-events: auto;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    .loading {
      display