# 使用场景
支持图片、视频、PDF 和其它文件类型进行预览。
# 使用示例
基础使用
不需要任何配置，通过 v-model 指定要预览的文件列表。
可拖动
文件预览框支持拖动。
指定文件列表的文件类型
通过 fileType 字段指定统一的文件类型，使用 listType 设置文件列表的展示形式。
切换文件类型
切换列表展示方式
支持不同格式的参数
还支持传递一个对象，或者一个单独的文件 url 访问路径，或者作为单独的文件预览组件。
传递一个对象
只是传递一个访问路径
点击预览
文件名省略处理
指定宽度，超出后文件名显示省略号，移动上去显示完整文件名。
自定义内容
完全自定义要显示的列表内容，组件只提供预览的能力。
支持音频文件播放
支持音频文件播放。
卡片类型自定义展示几列
卡片类型自定义展示几列，类似栅格布局里面的 span 属性配置。
通过全局挂载使用
全局挂载了 $viewer 函数，可直接调用函数后调用 showModal 来使用。
# API
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 受控，如果是数据回显，结构支持 [{name: '', url: ''}] 和 [{fileName: '', filePath: ''}] | Array | [] | [] |
| fileType | 文件类型，默认通过后缀识别，如果指定了就优先使用 | String | image | video | pdf | file | |
| listType | 文件的上传类型，根据不同的 listType 切换成不同的上传样式 | String | thumbnail | link | card | custom | thumbnail |
| downloadUrl | 文件预览地址，如果传递了就使用，否则去取 $api.download | String | String | '' |
| addDownloadPath | 是否自动添加文件下载地址，默认不拼接，一般也不需要拼接 | Boolean | true | false | false |
| showFileList | 是否显示文件列表，如果在上传组件里面使用则不需要展示列表 | String | image | video | pdf | file | true |
| fieldKey | 设置默认值的文件列表时，传递的 name 和 url，接口一般返回的是 fileName 和 filePath，默认先取 name 和 url，没有的话再去取 fileName 和 filePath | Object | {name: String, url: String} | {name: 'fileName', url: 'filePath'} |
| span | 仅 listType 为 card 生效，文件列表以栅格形式展示 | Boolean | Number | false | Number | false |
| usePdf | 是否使用 ak-pdf 组件来显示 pdf 文件，默认使用 iframe 来加载。因为在 IE11 里面 pdf 文件会变成下载，所以需要借助 ak-pdf 来展示 | Boolean | Object<ak-pdf-canvas attrs> | false | Object | false |
| onAfterClosed | 弹框完全关闭后的回调 | Function | -- | -- |
| showDownload | 是否显示下载按钮 | Boolean | true | false | false |
| drag | 文件预览框是否需要拖动 | Boolean | true | false | false |
Methods
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| refs.showModal | 显示弹框，activeIndex 默认选中第一个，传递具体下标来选中，如果是 true 也是默认选中第一个 | Function | Function | showModal(record, activeIndex = true) |
| refs.hideModal | 隐藏弹框，跟 showModal 对应 | Function | -- | -- |
| fileChange | 预览文件切换的回调，点击切换、箭头切换、初次打开预览这三个地方都会触发该方法的回调 | Function | -- | function(index, record) |
插槽
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| slot=default | 默认插槽，配合 listType=custom 使用，当默认展示的文件列表不满足时使用。 | -- | -- | -- |
| slot=actions | 在文件列表后面追加操作使用。 | -- | -- | -- |
| slot=preview | 当预览的文件类型需要自定义时使用。 | -- | -- | -- |
全局方法
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| this.$viewer | 全局挂载的方法，初始化的时候支持传递所有的 props 属性，返回的实例新增了 close 方法，与 hideModal 的区别是 close 方法在关闭弹框的同时会移除弹框的 DOM 节点，如果是通过全局挂载来使用的弹框，建议是 close 来关闭 | Function | this.$viewer(props) | -- |
| viewer.close | 调用 this.$viewer 之后返回的 close() 函数，用来关闭当前打开的预览弹框 | Function | -- | -- |