vue封装全局的Loading问题
更新时间：2026年05月24日 10:41:22 作者：想要飞翔的pig
本文详细介绍了在Vue项目中实现加载动画的方法,通过在app.vue注入样式、封装js文件及在main.js挂载,最后在页面调用触发的具体步骤,为开发者提供实用指南
一、在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)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue增加强缓存和版本号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue接入ts基本方法，关于ts，也出了很久，下面我们就来简单学习了下ts并且在原有项目上接入基本ts语法，也算是一个初级尝试，简单梳理下基础的接入配置和已经遇到的问题，供需要的小伙伴们参考2022-01-01
vue+electron实现创建多窗口及窗口间的通信(实施方案)
这篇文章主要介绍了vue+electron实现创建多窗口及窗口间的通信,本文给大家分享实施方案结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue3-ace-editor如何配置语法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在 Vue 3 中,如果你想监听 reactive 对象中的某个属性发生的变化,你可以使用 watch 函数进行监听,watch 函数允许你观察 reactive 对象的某个属性或者整个对象,所以本文给大家介绍了Vue3监听reactive对象中属性变化的方法,需要的朋友可以参考下2024-08-08
Vue.js中的watch选项用于监听Vue实例上某个特定的数据变化,下面这篇文章主要给大家介绍了关于Vue3 Watch踩坑实战之watch监听无效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue使用H5的audio标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要给大家介绍了关于Vuex中Getter的基本使用教程,getter相当于Vuex中的计算属性 对 state 做处理再返回,本文通过示例代码将Getter介绍的非常详细,需要的朋友可以参考下2021-07-07
vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题
这篇文章主要介绍了vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了最适应的vue.js的form提交涉及多种插件,涉及到 vue.js动态添加css样式 ，tab切换 ，touch，表单提交，验证，toast，数据双向绑定等。需要的朋友可以参考下2018-08-08
最新评论