附件预览

提醒

hl-preview 可以展示所有的附件，建议优先使用hl-preview，在不方便或不满足需求的情况下使用hl-image、hl-video、hl-file和自定义组件

特别提醒

后端返回的数据是直接给文件预览地址，而且字段都是定死的，不允许做任何适配和自定义组件，特殊情况讨论后再做定夺

基本用法

图片

视频

音频

test.mp3

文件

测试文档

多个附件

test.mp3测试文档统一用户对接-对接文档.xlsx

vue

基本用法中可以看到针对不同类型的附件类型，都做了不同的点击查看效果

多附件样式问题

在上面的例子中多个附加默认都被flex容器包裹，展示不是太友好，可以添加card属性来指定文件以卡片展示或者覆盖.hl-file-item类的样式：

卡片展示

test.mp3

测试文档

统一用户对接-对接文档.xlsx

覆盖 .hl-file-item 样式

test.mp3测试文档统一用户对接-对接文档.xlsx

vue

属性

属性	说明	类型	可选值	默认值
files	文件	Object/Array	—	null
height	图片、视频、卡片展示的文件等外层容器的高度	String	—	100px
width	图片、视频、卡片展示的文件等外层容器的宽度	String	—	100px
card	是否以卡片形式展示	Boolean	—	false
no-preview	默认每个类型附件都带有点击查看效果，该属性可以禁止查看行为	Boolean	—	false

警告

最后一次提醒：files的数据结构已经定死，不允许做任何兼容处理，对象结构如下：

{
  "id": "文件ID",
  "name": "文件名(原始名称，不是后端自己生成的随机数)",
  "path": "文件访问路径"
}