vue触发a标签的点击事件。vue3 dom操作 触发点击事件 。文件选择库只会触发一次change事件的问题

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 = ""