功能需求: 详情展示页点击后可以展示图片或者文件(被测试提出的bug)
先看下之前写的、只是给组件中加了个 disabled 进行了点击阻止
考虑到页面不同类型的文件预览 就新增了on-preview事件
<el-upload action="" :file-list="objectValue.fileInfoList" :on-preview="handlePreview" disabled />
逻辑代码块(通过事件过滤其url 判断类型进行渲染)
// 文件下载
handlePreview(file) {
if (!file.url) {
this.$message.error('下载失败')
return
}
const type = file.url.split('.')[4]
// 判断文件类型
if (type === 'doc' || type === 'docx' || type === 'xlsx' || type === 'xls' || type === 'ppt' || type === 'pptx') {
// 在当前浏览器直接下载
document.location.href = file.url
} else {
// 图片在浏览器打开 新的页面展示
window.open(file.url, 'hello')
}
}
哭着给我老大求来的… 比较简洁就写下来了