Grid 九宫格

参数定义

参数	类型	必填	默认值	说明
v-model	array	否	-	绑定值
column	number	否	''	列数
itemKey	string	否	id	主键
imgWidth	string	否	28px	图片宽度
imgHeight	string	否	28px	图片高度
borderColor	string	否	rgba(165, 165, 165, 0.1)	边框颜色
clickable	boolean	否	true	是否可点击

事件定义

事件名	参数	说明
itemClik	(item,index)	点击时触发

代码示例

<template>
  <Grid
  v-model="gridData"
  :column="3"
  @itemClik="(item) => toast.info(`点击了${item.text}`)"
  >
  </Grid>
</template>
<script setup>
const gridData =[
    {
        "text": "online",
        "img": "/static/index/128/qingjia1.png",
        "itemKey": 0
    },
    {
        "text": "组件示例",
        "img": "/static/index/128/chuchai.png",
        "itemKey": 1
    },
    {
        "text": "公文发文",
        "img": "/static/index/128/gongwen.png",
        "itemKey": 2
    },
    {
        "text": "通知公告",
        "img": "/static/index/128/tongzhi.png",
        "itemKey": 3
    },
    {
        "text": "日程",
        "img": "/static/index/128/richeng.png",
        "itemKey": 4
    },
    {
        "text": "考勤",
        "img": "/static/index/128/kaoqin.png",
        "itemKey": 5
    },
    {
        "text": "内部邮件",
        "img": "/static/index/128/youjian.png",
        "itemKey": 6
    },
    {
        "text": "通讯录",
        "img": "/static/index/128/tongxun.png",
        "itemKey": 7
    },
    {
        "text": "日报",
        "img": "/static/index/128/richang.png",
        "itemKey": 8
    }
]
</script>

效果