<template>
<div>
<!-- 使用 van-empty 组件 -->
<van-empty
image="https://img.yzcdn.cn/vant/empty-image.png"
description="暂无数据"
>
<!-- 可以在插槽中自定义内容 -->
<template #bottom>
<van-button type="primary" @click="loadData">加载数据</van-button>
</template>
</van-empty>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 这里可以添加组件的相关逻辑
// 模拟加载数据的操作
const loadData = () => {
// 这里可以添加加载数据的逻辑
console.log('加载数据');
};
return {
loadData,
};
},
};
</script>
<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>
在上述代码中，我们使用了 van-empty 组件，并通过 image 属性设置了显示在空状态中的图片，通过 description 属性设置了描述文本，这里是"暂无数据"。
你还可以在插槽中使用 bottom 插槽自定义底部的内容，例如添加一个按钮用于加载数据。
确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。
转载请注明出处：http://www.zyzy.cn/article/detail/5749/Vant