vue触发a标签的点击事件。vue3 dom操作 触发点击事件 。文件选择库只会触发一次change事件的问题 电脑版发表于：2022/8/15 14:38 [TOC] ### vue触发a标签的点击事件 **直接操作dom节点的方式比较简单** ``` <button @click="handleBtnClick">点击按钮</button> <p @click="handleTextClick" id="text">文字</p> ``` js ``` methods: { handleBtnClick: function(){ document.getElementById("text").click(); }, handleTextClick: function(){ alert("hello"); } } ``` **也可以考虑使用ref** ``` 第一步给元素添加 ref， 第二步触发点击事件 this.$refs.refName.$el.click(); ``` ### vue3 dom操作 触发点击事件 vue3 触发点击事件示例代码如下： ``` <el-button type="success" :icon="Plus" size="default" @click="openChoiseFile">导入 </el-button> <input type="file" ref="fileInut" style="visibility: hidden" @change="handleFileUpload" /> <script setup lang="ts" name="certificateUser"> const fileInut = ref(null); const openChoiseFile = () =>{ // 触发input的点击事件 fileInut.value.click() // 直接fileInut.value就可以获取dom节点了 } </script> ``` #### 文件选择库只会触发一次change事件的问题 就是第二次选择的是同一个文件不会触发change事件。其实要解决也很简单在处理完成后把文件选择库的value复制为空一下，让它变成初始的未选择状态就行了撒。 ``` const fileInut = ref(null); // 直接这样使用dom操作给它value赋值一下就行了，当然使用vue的绑定也是可以的 fileInut.value.value = "" ```
