<template>
<div>
<van-grid :column-num="3">
<van-grid-item
v-for="(item, index) in gridData"
:key="index"
:text="item.text"
@click="handleClick(item)"
>
<img :src="item.icon" alt="">
</van-grid-item>
</van-grid>
</div>
</template>
<script>
export default {
data() {
return {
gridData: [
{ text: '选项1', icon: 'https://example.com/icon1.png' },
{ text: '选项2', icon: 'https://example.com/icon2.png' },
{ text: '选项3', icon: 'https://example.com/icon3.png' },
// 添加更多选项...
],
};
},
methods: {
handleClick(item) {
console.log('点击了选项', item.text);
// 在这里可以处理点击事件的逻辑
},
},
};
</script>
在这个示例中，<van-grid> 组件用于创建宫格布局，通过 :column-num 属性设置每行的列数。<van-grid-item> 组件用于包裹每个宫格项，通过 v-for 遍历数据数组生成宫格项。你可以在每个宫格项内放置图标、文字等内容，并通过 @click 事件监听宫格项的点击事件。
确保已正确安装和引入 Vant，以及按照文档进行配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5694/Vant