首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的项目中，可以像这样使用 Skeleton 组件：
<template>
<div>
<!-- 使用 vant-skeleton 组件 -->
<van-skeleton
:avatar="true"
:title="true"
:row="3"
:loading="loading"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { Skeleton } from 'vant';
export default {
components: {
[Skeleton.name]: Skeleton,
},
setup() {
// 使用 ref 创建一个响应式变量，用于设置是否处于加载状态
const loading = ref(true);
// 模拟异步加载数据
setTimeout(() => {
// 将 loading 设为 false，表示加载完成
loading.value = false;
}, 2000);
return {
loading,
};
},
};
</script>
在这个例子中，我们使用了 van-skeleton 组件，通过设置不同的属性，可以控制骨架屏的显示效果。在这个例子中，我们开启了头像、标题，设置了 3 行的占位文本，并通过 :loading 属性控制是否显示骨架屏。
你可以根据实际需求调整骨架屏的配置项，例如 avatar 用于控制是否显示头像占位，title 用于控制是否显示标题占位，row 用于设置文本行数等。
转载请注明出处：http://www.zyzy.cn/article/detail/5840/Vant