el-upload 点击一次 出来两个选择文件框 解决方案

描述:

最近兼容低版本火狐浏览器, 版本贼低, 估计大家这辈子不会碰到, 也希望你们不要碰到.
然后用el-upload上传点东西, 结果发现点击一下, 选择文件点击确定后, 又弹出来了选择文件框.
废话就不多说了.

解决思路:

谷歌,高版本火狐都没事.
出来两次, 最容易想到点击两次.

开始是监听该input是否被点击两次

就是这个input,但是发现他只被点击一次....
然后我看了看ele源码,发现el是监听click事件

    handleClick() {
      if (!this.disabled) {
        this.$refs.input.value = null;
        this.$refs.input.click();
      }
    },

然后通过js点击input

<input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>

经过多次失败,我忽然想到是不是click事件没阻止,然后直接点击到了input或者其它我没考虑的情况.
于是,我监听input,click后获取event,执行event.stopPropagation().

$("el-upload__input").on({
      click: function (event) {
        console.log(event)
        event.stopPropagation()
      }
    })

就解决了.
这个Bug我吃定的了.

posted @ 2021-01-14 16:08  joyzher  阅读(2909)  评论(1编辑  收藏  举报