让element

2024-06-06 21:29| 来源: 网络整理| 查看: 265

网上找了一堆都没有什么头绪, 其中有在上传文件过程中修改class达到突变更换的目的,但是引入了多文件和多组件的复杂场景后效果不尽人意, 比如删除文件或者回显没有办法正常显示图标了.

在研究了下, 因为elementui的文件图标是写死的, 我找到了一种效果几乎打到了我的期望, 基于修改class的想法我找到了思路每次文件列表发生改变时, 就把整个页面的文件列表重新渲染一下图标, 显示肯定不会出错了

效果图

在这里插入图片描述

上传组件 ... 定义方法, 只需要每次要重新渲染的时候就调用一下renderFileIcon()即可 methods: { renderFileIcon() { //找出所有文件图标的class this.$nextTick(() => { let fileElementList = document.getElementsByClassName('el-upload-list__item-name'); if (fileElementList && fileElementList.length > 0) { for (let ele of fileElementList) { let fileName = ele.innerText; //获取文件名后缀 let fileType = fileName.substring(fileName.lastIndexOf(".") + 1); let iconElement = ele.getElementsByTagName('i')[0]; if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fileType) != -1) { iconElement.className = "imgicon-img" // 图⽚，动图 } else if (['mp4','3gp','avi',"flv",'MP4','3GP','AVI',"FLV"].indexOf(fileType) != -1) { iconElement.className = 'imgicon-video' // 视频 } else if (['doc','docx','DOC','DOCX'].indexOf(fileType) != -1) { iconElement.className = 'imgicon-docx' // 文档 } else if (['xls','xlsx','XLS','XLSX'].indexOf(fileType) != -1) { iconElement.className = 'imgicon-xlsx' // 表格 } else if (['ppt','pptx','PPT','PPTX'].indexOf(fileType) != -1) { iconElement.className = 'imgicon-pptx' // PPT } else if (['zip','ZIP'].indexOf(fileType) != -1) { iconElement.className = 'imgicon-zip' // 压缩包 } else if (['pdf','PDF'].indexOf(fileType) != -1) { iconElement.className = 'imgicon-pdf' // PDF } else { iconElement.className = 'imgicon-default' //默认图标 } } } }) }, } 样式定义

主要定义class的自定义文件图标路径

.myupload >>> .imgicon-video { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/mp4.png"); } .myupload >>> .imgicon-img { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/jpeg.png"); } .myupload >>> .imgicon-pdf { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/pdf.png") !important; } .myupload >>> .imgicon-docx { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/docx.png") !important; } .myupload >>> .imgicon-zip { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/zip.png") !important; } .myupload >>> .imgicon-pptx { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/pptx.png") !important; } .myupload >>> .imgicon-xlsx { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/xlsx.png") !important; } .myupload >>> .imgicon-default { display: inline-block; width: 20px; margin-bottom: -3px; height: 20px; background-size: 100% 100%; margin-right: 10px; background-image: url("../../../assets/images/fileicon/rar.png") !important; }

【本文地址】

让element

让element

今日新闻

推荐新闻