Vant3 Empty 空状态

Vant3 的 van-empty 组件用于展示空状态，例如在没有数据的情况下显示一些提示信息。以下是一个简单的例子，演示如何在 Vue 组件中使用 Vant3 的 Empty：

<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.pingtaimeng.com/article/detail/5749/Vant