vue封装全局的Loading问题
作者：想要飞翔的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)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。