记录生平第一次提issue的过程——vue-easy-dnd

597 阅读3分钟

前言


事情是这样的:这周一,正当我奋笔疾书,忙着写代(mo)码(yu)的时候,我的测试突然偷偷的告诉我,兄弟,你们要上线的项目有个很严重的bug,你得改啊!当时我的脑子里面是这样的:

当我跟他说:咋可能呢,我都测试过了,说着把他叫了过来,然后当着他的面演示了一下。然后他的表情是这样的:

然后他就回到了他的位置上,把我叫了过去,然后他演示了一波,演示完我的表情是这样的:

u=2842176741,289047944&fm=26&fmt=auto.webp

欲知后事如何,请听下次.....咳咳咳,这次分解。

起因


事件的起因是一个组件vue-easy-dnd,我在项目引入了这个组件,由于是个前端,所以,谷歌浏览器就成了我的最常用浏览器。

aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMjAzODQxLTNmMzYwYjFiMTYxMjIwYTAuZ2lm.gif

而我的测试,用的是火狐,他在测试的过程中,发现当要拖拽的东西是图片的时候,在谷歌上拖拽放下正常,在火狐上会打开一个新叶签来显示图片,并且放下的时候发现那个图片像是粘了狗皮膏药一样,只有再点击一下才行。然后我就打开了浏览器,在drop的时候,打印了一下事件。这里我用一下codesandbox展示一下

在谷歌浏览器上打印是这样的

image.png

在火狐上是这样的

image.png

通过图上发现,火狐上偶尔会触发dropevent事件,不是我们自定义的事件.所以我得出来了一个结论:

这个组件有bug!!!

1-1F523200628.png

于是我去了这个组件的github地址,发现是外国人写的,用我脑子所剩无几的单词,去提了一个issue,

image.png

然后过了一晚上,不出意外的,我的issue被关了(我已经预感到了)

image.png

他说不是他的包的问题,纳尼??? 我难道测试的有问题么???我此时深深的怀疑了自己

u=773696797,2156397056&fm=26&fmt=auto.webp

于是我就在codesandbox 写了示例代码,并且@了他

image.png

这次很快,贡献者回我了

image.png

事情看似到这结束了,但是我项目着急上线,贡献者又没有时间,怎么办呢。没办法,只能自己撸源码了,网上已经说过怎么解决这个问题,基本上都是由于没有阻止事件的默认行为的,所以,我把组件下载下来,在看了他的drop.vue

image.png

然后我去找到了混入的代码,在里面drop的时候,打印了一下,奇怪的事情发生了,

image.png

这玩意在dropevent的时候根本就没触发。(就是上面火狐那个Dropevent)当时,我脑子就不转了

既然drop不行,难道是drag的时候出了问题,于是去看了DragMixin.ts,发现在onmouseDown的方法最后注释掉了一句话,并没有阻止了事件的默认行为,我自己打开了这句话,然后一试:

image.png

居然神奇的好了!!!! 火狐上打印的跟谷歌上一样了

由于这个是注释掉的,上面还有防止touchstart转变成mousedown事件,我并没有提pr,我把我这个结果回复了贡献者,并询问了注释掉的原因,但是,很遗憾,贡献者暂时还没看到。等他回复了,我会在文章下面表明的。

后记


我最近加入了大崔哥的群,诺,就下面的帅哥,我把我这个经历在群里说了,大崔哥回答我,说我提issue的时候一定要有一定的逻辑,并且,给我了一个链接,也就是大崔哥最近开的共读vue3 issue的一个git项目vue-magic

image.png

可以详细看看底下的人是怎么提issue。 群里的人也给我了一个 github.com/whylost/vue…

大家在发现开源库的bug的时候,提issue的时候不妨注意一下,好了,就这样吧,我要忙着搬砖了。