@xiangge1307/icon-grid-vue

@xiangge1307/icon-grid 的 Vue 3 适配器，提供 <IconGrid /> 组件。

安装

pnpm add @xiangge1307/icon-grid-vue @xiangge1307/icon-grid

需同时安装核心包（peer dependency）。

快速上手

<script setup lang="ts">
import { ref } from 'vue'
import { IconGrid } from '@xiangge1307/icon-grid-vue'
import type { GridItem } from '@xiangge1307/icon-grid'
import '@xiangge1307/icon-grid/style.css'

const items = ref<GridItem[]>([
  { id: '1', label: '工作台', icon: '/icons/a.png', type: 'icon' },
  { id: '2', label: '设置', icon: '/icons/b.png', type: 'icon' },
])
</script>

<template>
  <IconGrid
    :items="items"
    :cols="6"
    :on-change="(v) => (items = v)"
  />
</template>

样式：必须 import '@xiangge1307/icon-grid/style.css'，否则布局与交互样式缺失。

Props

与核心 IconGridOptions 一致，常用项：

| Prop | 类型 | 默认 | 说明 | |------|------|------|------| | items | GridItem[] | — | 必填 | | cols | number | 自适应 | 列数 | | editable | boolean | true | 可编辑 | | descriptionField | string \| false | — | 悬停描述字段名 | | onChange | (items) => void | — | 数据变更写回 | | onIconClick | (item, event) => void | — | 点击图标 | | onReady | (api) => void | — | 实例就绪 |

实例方法

<script setup lang="ts">
import { ref } from 'vue'
import { IconGrid } from '@xiangge1307/icon-grid-vue'

const gridRef = ref<InstanceType<typeof IconGrid> | null>(null)

function dump() {
  console.log(gridRef.value?.getItems())
}
</script>

<template>
  <IconGrid ref="gridRef" :items="items" :on-change="(v) => (items = v)" />
</template>

暴露：getItems / setItems / setEditable / getInstance。

相关包

• 核心：@xiangge1307/icon-grid
• React：@xiangge1307/icon-grid-react

License

MIT