首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-loading：
<template>
<div>
<el-button @click="toggleLoading">点击加载</el-button>
<el-loading v-if="loading" :text="loadingText" :fullscreen="false"></el-loading>
</div>
</template>
<script>
import { ElButton, ElLoading } from 'element-plus';
export default {
components: {
ElButton,
ElLoading,
},
data() {
return {
loading: false, // 控制加载状态的显示与隐藏
loadingText: '加载中...', // 加载状态的文本
};
},
methods: {
toggleLoading() {
this.loading = !this.loading;
},
},
};
</script>
在这个例子中，我们使用了 el-button 组件来触发加载状态的显示与隐藏。通过点击按钮，调用 toggleLoading 方法，改变 loading 的值，从而控制加载状态的显示与隐藏。
el-loading 组件有一些属性可以配置，例如：
- text: 加载状态的文本。
- fullscreen: 是否显示在全屏模式下，默认为 true，即覆盖整个页面。
你可以根据实际需求调整加载组件的样式和配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5562/ElementPlus