V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
fangwenxue
V2EX  ›  问与答

vue3 事件响应问题

  •  
  •   fangwenxue · 2022-10-01 15:33:09 +08:00 · 906 次点击
    这是一个创建于 544 天前的主题,其中的信息可能已经有所发展或是发生改变。
    setup(){
        const uploadInput = ref(null)
        const clickUpload = (e) => {
          if (uploadInput.value) {
            console.log(uploadInput.value) # 每次触发都打印了 2 次
            uploadInput.value.click()
          }
        }
        const fileChange = (e) => {
          console.log(e) # 第二次选择文件没有触发事件
        }
    }
    
        
    <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>
    

    第二次选择文件为什么没有触发事件 ?

    5 条回复    2022-10-01 18:00:10 +08:00
    rabbbit
        1
    rabbbit  
       2022-10-01 16:31:30 +08:00
    同一个文件不会而二次触发 change 事件
    fangwenxue
        2
    fangwenxue  
    OP
       2022-10-01 16:32:55 +08:00
    @rabbbit Soga

    clickUpload 为什么会打印 2 次,加了 stop 也不行
    rabbbit
        3
    rabbbit  
       2022-10-01 16:57:57 +08:00
    弹一次就 <input @click.stop type="file" class="hidden" accept="image/*" ref="uploadInput" @change="fileChange">
    为什么要在 upload-box 里 uploadInput.value.click(),是想自定义 input 按钮的样式吗?
    rabbbit
        4
    rabbbit  
       2022-10-01 17:22:14 +08:00
    研究了一下,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>
    yunyuyuan
        5
    yunyuyuan  
       2022-10-01 18:00:10 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1022 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:23 · PVG 03:23 · LAX 12:23 · JFK 15:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.