首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-skeleton：
<template>
<div>
<el-skeleton :loading="loading" animation="wave" :row="3">
<!-- 这里放置实际内容，当数据加载完成后，骨架屏会消失，显示实际内容 -->
<div v-if="!loading">
<!-- 实际内容 -->
<!-- ... -->
</div>
</el-skeleton>
</div>
</template>
<script>
import { ElSkeleton } from 'element-plus';
export default {
components: {
ElSkeleton,
},
data() {
return {
loading: true, // 控制骨架屏显示与隐藏
};
},
created() {
// 模拟异步数据加载
setTimeout(() => {
this.loading = false; // 数据加载完成后设置 loading 为 false
}, 2000);
},
};
</script>
在这个例子中，我们使用了 el-skeleton 组件，并通过 :loading 属性来控制骨架屏的显示与隐藏。animation 属性用于设置动画效果，这里使用了 "wave" 效果。:row 属性表示骨架屏的行数。
在实际应用中，你可以将 el-skeleton 包裹在需要加载数据的部分，当数据加载完成后，通过设置 loading 为 false，骨架屏就会消失，显示实际内容。
你可以根据实际需求调整骨架屏的样式和配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5556/ElementPlus