ImageCheck 图片选择

图片选择组件用于在表单中以图片网格的形式选择一项或多项，支持常规图片与头像两种展示形态。

基础用法（单选）

通过 v-model 绑定选中值，默认使用单选（Radio）模式。

<script setup>
const demoVal = ref('img1')
const imageOptions = [
  { image: 'https://picsum.photos/seed/img1/200/200', value: 'img1' },
  { image: 'https://picsum.photos/seed/img2/200/200', value: 'img2' },
  { image: 'https://picsum.photos/seed/img3/200/200', value: 'img3' },
  { image: 'https://picsum.photos/seed/img4/200/200', value: 'img4' },
]
</script>

<template>
  <TImageCheck v-model="demoVal" :options="imageOptions" />
</template>

多选模式

设置 multiple 切换为多选（Checkbox）模式，绑定值为数组。

<TImageCheck v-model="selected" multiple :options="imageOptions" />

头像模式

选项中使用 avatar 字段替代 image，展示圆形头像风格。

<TImageCheck v-model="selected" :options="[
  { avatar: 'https://i.pravatar.cc/150?u=a', value: 'a' },
  { avatar: '/avatar.png', value: 'b' },
  { avatar: 'https://i.pravatar.cc/150?u=c', value: 'c' },
  { avatar: 'https://i.pravatar.cc/150?u=d', value: 'd' },
]" />

网格列数

通过 cols 控制每行显示数量（1-6），默认自动排列。

<TImageCheck v-model="selected" :cols="4" :options="imageOptions" />

自定义插槽

通过默认插槽 + TImageCheckItem 子组件自定义每个选项的内容。

<TImageCheck v-model="selected">
  <div class="col-auto">
    <TImageCheckItem value="s1" image="..." />
  </div>
  <div class="col-auto">
    <TImageCheckItem value="s2" avatar="..." />
  </div>
</TImageCheck>

API

TImageCheck Props

Prop	说明	类型	默认值
v-model	选中值（单选为任意类型，多选为数组）	any | any[]	undefined
multiple	多选模式（checkbox）	boolean	false
disabled	全部禁用	boolean	false
name	分组名	string	undefined
cols	每行显示列数（1-6）	number	undefined
aspectRatio	图片容器宽高比，如 '4/3'、'16/9'	string	'1 / 1'
options	选项数组	ImageCheckOption[]	undefined

ImageCheckOption

字段	说明	类型	默认值
image	图片地址	string	undefined
avatar	头像背景图片（优先级高于 image）	string	undefined
value	选中值	any	image 或 avatar
disabled	禁用	boolean	false

TImageCheckItem Props

Prop	说明	类型	默认值
value	选项值	any	—（必填）
image	图片地址	string	undefined
avatar	头像背景图片	string	undefined
disabled	禁用	boolean	false

Events

事件	说明	参数
change	选中值变化时触发	value: any