el-upload on-preview 扩大预览事件点击范围

1.首先说明开发环境,vue2项目,采用列表模式的el-upload组件时,加入附件预览功能

element官网给出的示范代码是以下写法

javascript 复制代码
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

此时遇到的问题是,点击名字可以触发预览函数,点击缩略图没效果

我们需要改变一下写法,这些在官网里边都有

javascript 复制代码
<el-upload>
        <el-button size="small" type="primary">点击上传附件</el-button>
        <div class="el-upload__tip" slot="tip">提示信息</div>
        
        <template slot="file" slot-scope="{file}">
            <img @click="handlePreview" :src="file.url" class="el-upload-list__item-thumbnail">
            <p @click="handlePreview" class="el-upload-list__item-name">{{ file.name }}</p>
            <i @click="handleRemove" class="el-icon-close"></i>
        </template>
    </el-upload>

这样就可以把预览事件同时加在名字和缩略图上,进而配合预览组件使用即可

相关推荐
dy17173 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
凉白开<--4 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go5 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3