1.0.1 • Published 2 years ago
dl-preview
下载
npm install dl-preview --save
全局导入
import DlPreview from 'dl-preview'
Vue.use(DlPreview)
按需导入
import { componentName } form 'dl-preview'
Vue.component(componentName)
Customize configuration
See Configuration Reference.
属性
| 属性名 | 描述 | 类型 | 必填项 | 默认值 |
|---|
| fileList | 要预览的文件列表；props | Array | 是 | [] |
| previewType | 预览方式（是否需要左侧树形目录，值为 tree 时表示需要左侧树形目录） | String | 否 | tree |
| download | 用于下载文件返回，要下载的文件信息 | Function | 否 | undefiled |
fileList props
| 属性名 | 描述 | 类型 | 必填项 |
|---|
| id | 目录的唯一值 | String、Number | 是 |
| label | 目录的名称 | String | 是 |
| children | 目录中的文件列表 | Array | 是 |
| children.id | 文件的唯一值 | String、Number | 是 |
| children.label | 文件的名称 | String | 是 |
| children.type | 文件的类型 png, jpg, jpeg, image, mp3, audio, mp4, video, doc, docx, pdf, text | String | 是 |
| children.url | 文件预览路径 | String | 是 |
| children.downloadPath | 文件下载路径 | String | 否 |
| children.docDownloadPath | 文件下载路径（弃用） | String | 否 |
方法
| 方法名 | 描述 | 参数 | 返回值 |
|---|
| show | 显示预览组件 | ({ type, index, item }) => {}；type: previewType 为 tree 时必传，值为文件所在目录的 id，String；index: 预览文件所在目录中的下标，Number；item: 要预览的文件信息，Object | null |
| hide | 关闭预览组件 | () => {} | null |
| handleAccordion | 折叠菜单栏 previewType 为 tree 时可用 | () => {} | null |
| handleReset | 重新渲染 pdf | () => {} | null |
| handleRotate | 旋转图片 | (type) => {}；type: left, right | null |
| handlerPreviewPreFile | 上一页 | () => {} | null |
| handlerPreviewNextFile | 下一页 | () => {} | null |
| hanlderZoomIn | 缩小，图片和pdf可用 | () => {} | null |
| hanlderZoomOut | 放大，图片和pdf可用 | () => {} | null |
使用
<template>
<div>
<dl-Preview ref="dl-preview" previewType="tree" :fileList="fileList" :download="download"></dl-Preview>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [{
id: '11',
label: 'test',
children: [
{
id: '123456',
label: '3.0设备管理更改需求.png',
type: 'png',
url: 'http://127.0.0.1:8080/3.0设备管理更改需求.png',
downloadPath: 'http://127.0.0.1:8080/3.0设备管理更改需求.png',
fileType: "11",
},
{
id: '123457',
label: 'file_type_audio.png',
type: 'png',
url: 'http://127.0.0.1:8080/file_type_audio.png',
downloadPath: 'http://127.0.0.1:8080/file_type_audio.png',
fileType: "11",
},
]
}],
}
},
mounted() {
setTimeout(() => {
this.$refs["dl-preview"].show({ type: '11', index: 1, item: this.fileList[0].children[1] });
}, 3000)
},
methods: {
download(file) {
}
}
}
</script>