Elementui el-upload 图片列表缩略图模式添加查看大图含删除功能

前言:由于官网el-upload 图片列表缩略图模式没有查看大图的功能,所有自己自定义了一个,其中很多投机取巧的方式,写的不好,若有更好的方法,请留言哦(),不多说废话,直接贴

<template>
<el-upload 
	class="upload-el" 
	accept=".jpg,.png,.bmp" //限制上传的图片类型
	:show-file-list="true" //是否显示已上传文件列表
	multiple //设置多选
	:limit="3" //最大允许上传个数
	:on-exceed="handleExceed" //文件超出个数限制时的钩子
	:file-list="fileArr" //上传的文件列表
	:action="uploadConfig.uploadFileUrl" //必选参数,上传的地址
	:headers="uploadConfig.headers" //设置上传的请求头部例如一些token信息
	:on-error="uploadError" //文件上传失败时的钩子
	:on-success="uploadSuccess" //文件上传成功时的钩子
	list-type="picture">
	<el-button size="small" class="uplaodBtn">上传</el-button>
	<template #tip>
		<div class="el-upload__tip">请上传格式为jpg、png、bmp的图片,且确保图片内容清晰可见</div>
		   <!-- 关键代码在这里,这段代码是我将list-type="picture"的时候显示出来的缩略图的代码复制出来修改的 这里无法覆盖原来的picture,所有我在ul里面加了一个show的类名,然后在样式里面将原来的隐藏了,机智吧 (*^▽^*) -->
			<ul class="el-upload-list el-upload-list--picture show"
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值