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

问题描述

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

解决思路

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

技术难点

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

解决步骤

1. 通过ref 查找到 el-button 组件
2. 该组件有个 $el 属性，代表的就是原生DOM节点
3. 调用原生 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>
1
2
3
4
5
6
7
8
9
10
11

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

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