Vue2.x 代码模拟el-button组件的点击事件
文章目录问题描述解决思路技术难点解决步骤案例部分代码问题描述利用 element-ui Upload 组件 时间了文件上传有个一模一样的功能,但是功能描述不一样,即不同的位置若果自己再重新写一个上传组件的功能,觉得比价麻烦,而且功能一模一样,代码重复解决思路用户通过点击其他按钮触发的事件,来触发 Upload 组件的按钮实现的选择文件并上传的功能技术难点是一个组件,查找到该节...
·
问题描述
- 利用 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 : 是否显示上传文件列表
更多推荐
已为社区贡献32条内容
所有评论(0)