挂载到main文件中,具体页面使用,elementui中在vue项目中调用loading页面全屏使用示例代码
时间: 2024-03-15 20:45:13 浏览: 54
在 Vue 项目中,可以通过在 main.js 文件中全局挂载 ElementUI 的 Loading 组件,方便在任何页面中使用。以下是示例代码:
在 main.js 文件中,引入并挂载 ElementUI:
```
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
在组件中,可以直接使用 this.$loading 全局方法来调用 Loading 组件:
```
<template>
<div>
<el-button @click="showLoading">点击打开 Loading</el-button>
</div>
</template>
<script>
export default {
methods: {
showLoading() {
const loadingInstance = this.$loading({
fullscreen: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loadingInstance.close();
}, 3000);
}
}
}
</script>
```
在 showLoading 方法中,通过 this.$loading 方法调用 Loading 组件,并传入相应参数来设置 Loading 样式。同样通过 setTimeout 方法模拟 3 秒后关闭 Loading 实例。
需要注意的是,全局挂载 Loading 组件会增加项目的体积,因此建议根据实际需求选择是否使用全局挂载。
阅读全文