vue3 事件响应问题

同一个文件不会而二次触发 change 事件

@rabbbit Soga

clickUpload 为什么会打印 2 次，加了 stop 也不行

弹一次就 <input @click.stop type="file" class="hidden" accept="image/*" ref="uploadInput" @change="fileChange">
为什么要在 upload-box 里 uploadInput.value.click()，是想自定义 input 按钮的样式吗？

研究了一下，1 楼的回复应该是错误的。我也不清楚为什么不会触发两次。
不过有一点可以确定的是，不要这样写。
现在的代码加个 setTimeout 进去直接就变成死循环了。

<template>
<div class="container content">
<div class="upload-box" @click="clickUpload">
<input type="file" class="hidden" accept="image/*" ref="uploadInput" @change="fileChange">
</div>
</div>
</template>

<script>
import {ref} from 'vue'
export default {
setup(){
const uploadInput = ref(null)
const clickUpload = (e) => {
if (uploadInput.value) {
console.log(uploadInput.value)
setTimeout(() => {
uploadInput.value.click()
})
}
}
const fileChange = (e) => {
console.log(e)
}
return {
uploadInput,clickUpload,fileChange
}
}
}
</script>

https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file
你两次选择了同一个文件