xtf-grid-item

组件说明

xtf-grid-item 是宫格项组件，必须配合 xtf-grid 使用。用于在插槽模式下自定义网格项内容，支持跨行跨列、点击效果和自定义样式，适用于自定义网格布局等场景。

基础用法

1. 基础用法

在 xtf-grid 插槽中使用：

vue

<template>
  <xtf-grid :columns="3" clickable>
    <xtf-grid-item title="首页"><xtf-icon name="home" /></xtf-grid-item>
    <xtf-grid-item title="搜索"><xtf-icon name="search" /></xtf-grid-item>
    <xtf-grid-item title="设置"><xtf-icon name="settings" /></xtf-grid-item>
  </xtf-grid>
</template>

2. 跨行跨列

通过 colSpan 和 rowSpan 实现跨列和跨行：

vue

<template>
  <xtf-grid :columns="3" clickable :auto-rows="120">
    <xtf-grid-item title="大项" icon="dashboard" :col-span="2" />
    <xtf-grid-item title="小项" icon="star" />
    <xtf-grid-item title="小项" icon="person" />
    <xtf-grid-item title="高项" icon="analytics" :row-span="2" />
    <xtf-grid-item title="小项" icon="settings" />
    <xtf-grid-item title="小项" icon="help" />
  </xtf-grid>
</template>

3. 自定义内容

通过默认插槽自定义项内容：

vue

<template>
  <xtf-grid :columns="2">
    <xtf-grid-item>
      <xtf-statistic title="今日收入" value="1280" prefix="¥" />
    </xtf-grid-item>
    <xtf-grid-item>
      <xtf-statistic title="今日订单" value="56" suffix="单" />
    </xtf-grid-item>
  </xtf-grid>
</template>

全部属性

属性	类型	默认值	作用描述	适用范围
`title`	`String`	`''`	标题	标题
`desc`	`String`	`''`	描述	描述
`clickable`	`Boolean`	`undefined`	是否可点击	交互
`disabled`	`Boolean`	`false`	是否禁用	禁用
`loading`	`Boolean`	`false`	是否加载中	加载
`variant`	`String`	`''`	变体样式	样式
`contentAlign`	`String`	`''`	内容对齐	布局
`padding`	`String \| Number`	`undefined`	内边距	布局
`radius`	`String \| Number`	`undefined`	圆角	样式
`minHeight`	`String \| Number`	`undefined`	最小高度	布局
`colSpan`	`String \| Number`	`1`	跨列数	布局
`rowSpan`	`String \| Number`	`1`	跨行数	布局
`square`	`Boolean`	`undefined`	是否方形	形状
`border`	`Boolean`	`undefined`	是否显示边框	边框
`activeScale`	`String \| Number`	`undefined`	点击缩放	交互
`activeEffect`	`String`	`''`	点击效果	交互
`activeShadow`	`String`	`''`	点击阴影	交互
`divider`	`Boolean`	`undefined`	是否显示分割线	分割线
`dividerInset`	`String \| Number`	`undefined`	分割线内缩	分割线
`dividerColor`	`String`	`''`	分割线颜色	分割线
`className` / `customClass`	`String`	`''`	项类名	样式覆盖
`style` / `customStyle`	`String \| Object`	`''`	项样式	动态样式覆盖
`itemKey`	`String \| Number`	`''`	插槽项稳定标识	动态列表
`index`	`Number`	`0`	未注册时的回退索引	手动索引
`customClass`	`String`	`''`	自定义类名	样式覆盖
`customStyle`	`String \| Object`	`''`	自定义样式	动态样式覆盖

事件

组件自身不派发事件。可点击项会委托父级 xtf-grid 触发 click 和 item-click，回调参数为 ({ item, index })。

插槽

插槽名称	说明
`default`	自定义项内容

主题说明

通过 inject 获取 xtf-grid 的配置
点击效果继承 xtf-grid 的 activeEffect 配置
边框和分割线继承 xtf-grid 的配置

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。

xtf-grid-item ​

组件说明 ​

基础用法 ​

1. 基础用法 ​

2. 跨行跨列 ​

3. 自定义内容 ​

全部属性 ​

事件 ​

插槽 ​

主题说明 ​