elementui中在vue项目中调用loading页面全屏,并且自定义文字使用示例代码
时间: 2024-03-15 22:45:21 浏览: 66
vue 项目中使用Loading组件的示例代码
在 ElementUI 中,可以通过 Loading 组件实现全屏的加载效果,并且可以自定义 Loading 文字。以下是示例代码:
```
<template>
<div>
<el-button @click="showLoading">点击打开 Loading</el-button>
</div>
</template>
<script>
import { Loading } from 'element-ui';
export default {
methods: {
showLoading() {
const loadingInstance = Loading.service({
fullscreen: true,
text: 'Loading...', // 自定义 Loading 文字
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loadingInstance.close();
}, 3000);
}
}
}
</script>
```
在 showLoading 方法中,通过 Loading.service 方法创建一个 Loading 实例,并设置 fullscreen: true 参数,使其全屏显示。同时可以设置 Loading 文字、Loading 图标等相关参数。最后通过 setTimeout 方法模拟 3 秒后关闭 Loading 实例。
需要注意的是,Loading 组件必须先引入 ElementUI,否则会报错。
阅读全文