【el-upload】el-upload组件 - list-type=“picture“ 时,文件预览展示优化

目录

  • 问题图
  • el-upload
  • 预览组件 PicturePreview
  • 效果展示

问题图

在这里插入图片描述

el-upload

<el-uploadref="upload"multipledragaction="#":auto-upload="false":file-list="fileList"name="files":accept="`.png,.jpg,.jpeg,.JGP,.JPEG,.PNG,.doc,.docx,.xls,.xlsx${isTz ? ',.mp4,.MP4' : ''}`":on-change="beforeAvatarUpload"list-type="picture"
><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">支持上传png/jpg/jpeg/doc/docx/xls/xlsx文件,且不超过5M</div><!-- 【使用组件】 --><div slot="file" slot-scope="{ file }"><PicturePreview :file="file" @remove="removeFile" /></div>
</el-upload>import PicturePreview from '@/components/PicturePreview'components:{PicturePreview}removeFile(file) {this.$refs.upload.handleRemove(file)
},

预览组件 PicturePreview

<!-- el-upload组件 - list-type="picture" 时,文件预览展示优化 -->
<template><div class="file_container"><div class="file"><el-imagev-if="/(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(fileType)":src="file.url":preview-src-list="[file.url]"/><i v-else class="el-icon-tickets" /></div><div class="name">{{ file.name }}</div><i class="el-icon-close" @click="$emit('remove', file)" /></div>
</template><script>
export default {name: 'PicturePreview',components: {},props: {file: {type: Object,required: true}},data() {return {}},computed: {fileType() {return this.file.name.split('.').pop()}},watch: {},created() {},methods: {}
}
</script><style lang='scss' scoped>
.file_container {position: relative;.file {$size: 80px;width: $size;height: $size;background-color: #f7f7f7;position: absolute;left: -85px;top: -5px;display: flex;align-items: center;justify-content: center;.el-image {width: 100%;height: 100%;}.el-icon-tickets {font-size: 30px;}}.name {}.el-icon-close {position: absolute;top: 5px;right: 5px;font-size: 10px;}
}
</style>

效果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/74000.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微前端 qiankun vite vue3

文章目录 简介主应用 qiankun-main vue3 vite子应用 qiankun-app-vue2 webpack5子应用 qiankun-react webpack5子应用 quankun-vue3 vite遇到的问题 简介 主要介绍以qiankun框架为基础&#xff0c;vite 搭建vue3 项目为主应用&#xff0c;wepack vue2 和 webpack react 搭建的…

C#从入门到精通(1)

目录 第一章 C#与VS介绍 第二章 第一个C#程序 &#xff08;1&#xff09;C#程序基本组成 1.命名空间 2.类 3.Main方法 4.注释 5.语句 6.标识符及关键字 &#xff08;2&#xff09;程序编写规范 1.代码编写规则 2.程序命名方法 3.元素命名规范 第三章 变量 &…

东隆科技携手PRIMES成立中国校准实验室,开启激光诊断高精度新时代

3月12日&#xff0c;上海慕尼黑光博会期间&#xff0c;东隆科技正式宣布与德国PRIMES共同成立“中国校准实验室”。这一重要合作标志着东隆科技在本地化服务领域的优势与PRIMES在激光光束诊断领域的顶尖技术深度融合&#xff0c;旨在为中国客户提供更快速、更高精度的服务以及本…

HarmonyOS Next~鸿蒙系统架构设计解析:分层、模块化与智慧分发的技术革新

HarmonyOS Next&#xff5e;鸿蒙系统架构设计解析&#xff1a;分层、模块化与智慧分发的技术革新 ​ ​ 鸿蒙操作系统&#xff08;HarmonyOS&#xff09;作为华为自主研发的分布式操作系统&#xff0c;其架构设计以全场景、多设备协同为核心目标&#xff0c;通过分层架构、模…

Vue Router工作原理探究

摘要&#xff1a; 随着单页应用&#xff08;SPA&#xff09;的广泛流行&#xff0c;路由系统成为前端开发中至关重要的部分。Vue Router作为Vue.js官方的路由管理器&#xff0c;为Vue应用提供了强大的路由功能。本文深入探讨Vue Router的工作原理&#xff0c;包括其核心概念、路…

SysOM 可观测体系建设(一):万字长文解读低开销、高精度性能剖析工具livetrace

可观测性是一种通过分析系统输出结果并推断和衡量系统内部状态的能力。谈及可观测性一般包含几大功能&#xff1a;监控指标、链路追踪、告警日志&#xff0c;及 Continues Profiling 持续剖析能力。对于操作系统可观测&#xff0c;监控指标可以帮助查看各个子系统&#xff08;I…

网络安全设备配置与管理-实验4-防火墙AAA服务配置

实验4-p118防火墙AAA服务配置 从这个实验开始&#xff0c;每一个实验都是长篇大论&#x1f613; 不过有好兄弟会替我出手 注意&#xff1a;1. gns3.exe必须以管理员身份打开&#xff0c;否则ping不通虚拟机。 win10虚拟机无法做本次实验&#xff0c;必须用学校给的虚拟机。首…

路由Vue Router基本用法

路由的作用是根据URL来匹配对应的组件&#xff0c;并且无刷新切换模板的内容。vue.js中&#xff0c;可使用Vue Router来管理路由&#xff0c;让构建单页应用更加简单。 一、效果 二、实现 1.项目中安装Vue Router插件 pnpm install vue-routerlastest 2.main.js import { …

24. 状态模式

原文地址: 状态模式 更多内容请关注&#xff1a;智想天开 1. 状态模式简介 状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许一个对象在其内部状态改变时改变其行为&#xff0c;使得该对象看起来似乎修改了其类。状态模式通过将状态的行…

【Qt】Qt + Modbus 服务端学习笔记

《Qt Modbus 服务端学习笔记》 1.因为项目的需要&#xff0c;要写一个modbus通信&#xff0c;csdn上感觉有些回答&#xff0c;代码是人工智能生成的&#xff0c;有些细节不对。我这个经过实测&#xff0c;是可以直接用的。 首先要包含Qt 的相关模块 Qt Modbus 模块主要包含以…

CherryStudio + 火山引擎DeepSeek R1 告别服务器繁忙

CherryStudio 火山引擎DeepSeek R1 告别服务器繁忙 一、下载CherryStudio并安装 CherryStudio是功能强大的多模型桌面客户端&#xff0c;支持Windows、macOS和Linux系统。集成了多种主流的大语言模型&#xff08;如OpenAI、DeepSeek、Gemini等&#xff09;以及本地模型运行功…

医院人事科室病区管理系统基于Spring Boot-SSM

目录 摘要 一、研究背景与意义 二、国内外研究现状 三. 系统目标 四、研究目的与内容 五、研究方法与技术路线 5.1 系统技术架构 六. 系统功能 6.1 人事管理 6.2 科室病区管理 6.3 科研管理 七. 系统安全性 八. 系统运行与维护 摘要 随着医疗行业的快速发展和医院…

Unity TextMeshPro中显示建筑特殊符号

示例&#xff1a;显示效果如图 实现步骤 1、下载 SJQY 字体库 2、导入字体&#xff1a;将 SJQY 字体文件&#xff08;如 .ttf 或 .otf 文件&#xff09;导入到 Unity 项目的 Assets 文件夹中。 3、创建 TMP 字体资产 方法一 方法二 选择刚导入的字体文件&#xff0c;在…

工具层handle_excel

该工具类利用openpyxl的load_workbook加载Excel&#xff0c;通过iter_rows按行迭代数据&#xff0c;将表头和用例数据用zipdict组合成字典&#xff0c;通过list.append将字典(单条测试用例)追加到列表中&#xff0c;从而封装Excel数据解析工具。 模块/类方法/属性使用场景描述o…

九、JavaScript作用域、预解析

一、JavaScript作用域 1.JavaScript作用域 ①代码名字&#xff08;变量&#xff09;在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突 ②js的作用域&#xff08;es6&#xff09;之前&#xff1a;全局作用域 局部作用域 ③全局作用域&#xff1a;整…

Rust语言学习

Rust语言学习 通用编程概念所有权所有权引用和借用slice struct(结构体)定义并实例化一个结构体使用结构体方法语法 枚举 enums定义枚举match控制流运算符if let 简单控制流 使用包、Crate和模块管理不断增长的项目&#xff08;模块系统&#xff09;包和crate定义模块来控制作用…

Windows Docker 报错: has no HTTPS proxy,换源

pull python 3.7报错&#xff1a; 尝试拉取Docker 测试库hello world也失败 尝试使用临时镜像源&#xff0c;可以成功拉取&#xff1a; sudo docker pull docker.m.daocloud.io/hello-world说明确实是网络问题&#xff0c;需要配置镜像源&#xff0c;为了方便&#xff0c;在d…

Git远程拉取和推送配置

Git进行远程代码拉取和推送时候提示配置user.name 和 user.email 背景&#xff1a;换新电脑后使用Git进行代码拉取和推送过程中&#xff0c;提示“Make sure you configure your “user.name” and “user.email” in git.”。这个配置针对git的正常使用仅需要配置一次&#xf…

详解string类+迭代器

迭代器 概念&#xff1a;在 C 中&#xff0c;迭代器是访问容器&#xff08;如数组、列表、向量、字符串等&#xff09;元素的一种方式。迭代器提供了一种统一的接口&#xff0c;使得你可以使用相同的代码来遍历不同类型的容器。迭代器本质上是一个指针或者指针的封装&#xff0…

小红书不绑定手机号会显示ip吗

小红书作为一个生活方式分享平台&#xff0c;拥有庞大的用户群体。在小红书上&#xff0c;用户可以分享自己的生活点滴、购物心得、美食体验等&#xff0c;与其他用户进行互动交流。最近&#xff0c;不少用户对于小红书是否会在不绑定手机号的情况下显示IP属地产生了疑问&#…