Grid 宫格布局组件

宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。 平台差异

📌平台差异说明

APP(vue)	H5	微信小程序	支付宝小程序
✔	✔	✔	✔

🏯基本使用示例

<!-- 全局使用 -->
<hy-gird :list="list"></hy-gird>

import { IconConfig } from '@hy-app/ui';
import { ref } from 'vue';

// 创建响应式数据
const list = ref([
    {
        icon: IconConfig.CRY_FILL,
        name: '小狗',
    },
    {
        icon: 'https://img1.baidu.com/it/u=563605416,3386931726&fm=253',
        name: '小猫',
    },
    {
        icon: 'star',
        name: '小鸡',
    },
]);

设置间距

<!-- 全局使用 -->
<hy-gird :list="list" gap="10px"></hy-gird>

设置宫格列数

<!-- 全局使用 -->
<hy-gird :list="list" col="5"></hy-gird>

自定义插槽

<template>
    <hy-grid :list="list">
        <template #default="{record}">
            <hy-image :src="record.url" width="80" height="80"></hy-image>
            <text>record.title</text>
        </template>
    </hy-grid>
</template>

<script setup="">
    import { IconConfig } from '@hy-app/ui';
    import { ref } from 'vue';

    // 创建响应式数据
    const list = ref([
        {
            url: IconConfig.CRY_FILL,
            title: '小狗',
        },
        {
            url: 'https://img1.baidu.com/it/u=563605416,3386931726&fm=253',
            title: '小猫',
        },
        {
            url: 'star',
            title: '小鸡',
        },
    ]);
</script>

API

Grid Props

参数	说明	类型	默认值
list	数据集	GridItemVo[]	-
col	宫格的列数	number	4
size	图标大小，数值默认单位px	number|string	4
customKeys	自定义键值	CustomKeysVo	{name: 'name',icon: 'icon'}
border	是否显示宫格的边框	boolean	false
itemHeight	单个宫格高度，数值默认单位px	string | number	100px
align	格对齐方式，表现为数量少的时候，靠左，居中，还是靠右	center|left|right	left
gap	间隔，数值默认单位px	string | number	0
bgColor	宫格的背景颜色	string	transparent
iconProps	图标属性api配置，详见图标Api	HyIconProps	-
customStyle	自定义需要用到的外部样式	CSSProperties	-
customClass	自定义外部类名	string	-

Events

事件名	说明	回调参数
click	点击宫格触发	(item: GridItemVo | string)

Slots

插槽名	说明	接收值
default	默认插槽	record: GridItemVo | string

Typings

类型说明

type GridItemVo = {
    /**
     * 图标名称或图片地址
     * */
    icon?: string;
    /**
     * 名称
     * */
    name?: string;
    /**
     * 图标属性api配置
     * */
    iconProps?: Partial<HyIconProps>;
    /**
     * 自定义内容键值对
     * */
    [key: string]: any;
};

type CustomKeysVo = {
    /**
     * 自定义标题键名
     * */
    name: string;
    /**
     * 自定义icon键名
     * */
    icon: string;
};

03:29