vue 封装全局的Loading

最新推荐文章于 2024-06-06 08:10:06 发布

想要飞翔的pig

最新推荐文章于 2024-06-06 08:10:06 发布

阅读量878

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_53587375/article/details/128568951

版权

vue 专栏收录该内容

35 篇文章

订阅专栏

一、1.在app.vue组件注入loading样式

<template>
<meg-loading
    :tip="centitle"
    :indicator="indicator"
    :spinning="antLoading"
    style="background-color: rgba(0, 0, 0, 0.6)"
  >
  </meg-loading>
  </template>
  <script>
  import { mapState } from "vuex";
  export default {
  name: "MegCubeLayout",
    data() {
	 return {
  		indicator: <meg-icon name="megui-loading2"></meg-icon>,
	 };
  },
  computed: {
    ...mapState("megCube/container", ["antLoading", "centitle"]),
  		},
	  };

二、封装的js文件 globalMethod.js

export const showLoading = function (flag, msg) {
    if (msg) {
      this.$store.state.megCube.container.centitle = msg
    } else {
      this.$store.state.megCube.container.centitle = '加载中...'
    }
    if (flag) {
        this.$store.state.megCube.container.antLoading = flag
    } else {
        this.$store.state.megCube.container.antLoading = false

    }
    
  }

三、在main.js挂载

import { showLoading } from './common/globalMethod'
Vue.prototype.$showLoading = showLoading // 全局loading

四、vue页面调用

触发：	 this.$showLoading(true, '正在上传中')
停止：	 this.$showLoading(false)