Vue2.x 代码模拟el-button组件的点击事件

最新推荐文章于 2024-12-31 15:06:19 发布

原创最新推荐文章于 2024-12-31 15:06:19 发布 · 5.9k 阅读

0 ·

CC 4.0 BY-SA版权

Vue2.x、vuex、iview、vux 专栏收录该内容

68 篇文章

订阅专栏

本文介绍如何避免代码重复，通过触发Element-UI Upload组件实现文件上传功能。利用Vue的$refs和$el属性，模拟点击事件，实现不同位置的上传功能，有效减少代码量。

文章目录

问题描述

利用 element-ui Upload 组件时间了文件上传
有个一模一样的功能，但是功能描述不一样，即不同的位置
若果自己再重新写一个上传组件的功能，觉得比较麻烦，而且功能一模一样，代码重复

解决思路

用户通过点击其他按钮触发的事件，来触发 Upload 组件的按钮实现的选择文件并上传的功能

技术难点

<el-button> 是一个组件，查找到该节点之后，没有模拟点击 click 的函数，该组件并不是原生的DOM 节点

解决步骤

通过ref 查找到 el-button 组件
该组件有个 $el 属性，代表的就是原生DOM节点
调用原生 DOM 节点的 click 方法，实现按钮的点击模拟

案例部分代码

<el-upload v-show="!scope.row.fileId"
	:show-file-list="false"
	class="upload-demo"
	:action="'/aaa/upload?CId=' + scope.row.cid"
	:data="{CId: scope.row.cid}"
	name="file"
	:on-success="fileChangeAction.bind(this,scope)">
	<el-button type="default" :ref='scope.row.cid'>上传文件</el-button>
</el-upload>

<el-button type="link" size="small" @click="resetSummary(scope.row)">更改总结</el-button>

// 重置总结
resetSummary: function (rowData) {
  let cid = rowData.cid
  let uploadBtnRef = this.$refs[cid]
  uploadBtnRef.$el.click()
},

属性里面可以实现简单的逻辑运算
:action="'/aaa/upload?CId=' + scope.row.cid"
this.$refs 查找到ref引用
利用Vue对象的 $el 属性，是代表 Vue对象的DOM节点
Upload组件中的
- data 属性是上传文件需要传递的参数
- name 属性是上传文件的文件名
- show-file-list ：是否显示上传文件列表