ImageGrid 图片宫格

用于展示图片列表。

示例

属性

属性	说明	类型	可选值	默认值
imageList	图片列表	ParsedImage[]。类型定义	-	-
shouldBreakWord	图片描述是否换行	boolean	-	-
width	图片宽度	string	-	160px
height	图片高度	string	-	160px
multiple	是否开启多选模式	boolean	-	false
separator	多选复制时的分隔符。不传时：有 copyTemplate 用换行符，无 copyTemplate 用 ;	string	-	-
copyTemplate	复制模板，支持 {字段名} 占位符，如 、<img src="{url}" width="600" />	string	-	-
modelValue	已选图片列表，支持 v-model	ParsedImage[]	-	-

复制模板

默认情况下，单图复制与多选复制都会复制图片的纯 url。传入 copyTemplate 后，会按模板拼接复制内容，模板中的 {字段名} 会被替换为当前图片上对应的字段（取 ParsedImage 上的字段，如 url、name、shortName、origin_name 等），字段为空时替换为空串。

<!-- 复制 markdown 图片语法：![描述](链接) -->
<ImageGrid :image-list="list" copy-template="![{name}]({url})" />

<!-- 复制 HTML img 标签，并指定宽度 -->
<ImageGrid :image-list="list" copy-template="<img src=&quot;{url}&quot; width=&quot;600&quot; />" />

多选复制时，每条内容按 copyTemplate 渲染后，再用 separator 拼接。未显式传 separator 时，有 copyTemplate 会使用换行符（便于粘贴到 markdown 文档），无 copyTemplate 时保持原有的 ;：

<!-- 复制出：![a](x)\n![b](y) -->
<ImageGrid
  :image-list="list"
  multiple
  copy-template="![{name}]({url})"
/>

事件

事件名	说明	回调参数
update:modelValue	选中图片变化时触发	ParsedImage[]
select-change	选中图片变化时触发	ParsedImage[]