Vant3 的 van-grid 组件用于展示宫格布局，以下是一个简单的例子，演示如何在 Vue 组件中使用 Vant3 的 Grid：
<template>
  <div>
    <!-- 使用 van-grid 组件 -->
    <van-grid :column-num="columnNum" :border="border">
      <!-- van-grid-item 是每个宫格项 -->
      <van-grid-item
        v-for="(item, index) in gridData"
        :key="index"
        :text="item.text"
        :icon="item.icon"
        @click="handleGridItemClick(index)"
      />
    </van-grid>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 宫格列数
    const columnNum = ref(3);

    // 是否显示宫格边框
    const border = ref(true);

    // 宫格数据
    const gridData = ref([
      { text: '文字1', icon: 'photo-o' },
      { text: '文字2', icon: 'goods-o' },
      { text: '文字3', icon: 'message-o' },
      { text: '文字4', icon: 'location-o' },
      // 可以继续添加更多的宫格项
    ]);

    // 处理宫格项点击的回调
    const handleGridItemClick = (index) => {
      console.log('点击宫格项', index);
    };

    return {
      columnNum,
      border,
      gridData,
      handleGridItemClick,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>

在上述代码中，我们使用了 van-grid 组件，并在其中使用了 van-grid-item 组件创建了每个宫格项。通过 v-for 遍历 gridData 数组，动态生成宫格项的内容。可以通过设置 :column-num 属性来控制每行显示的宫格列数，通过 :border 属性来控制是否显示宫格边框。

通过点击每个宫格项，可以触发 handleGridItemClick 方法，进行相应的处理。

确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。你可以根据实际需求自定义宫格的样式和行为。


转载请注明出处：http://www.zyzy.cn/article/detail/5763/Vant