fritx / vue-at

At.js for Vue.
https://fritx.github.io/vue-at/
MIT License
529 stars 114 forks source link

当el-input使用 @keyup.enter.native="xxxxx"时,vue-at的enter选中人后,el-input也会触发了这个事件,请问有什么好的方案吗 #151

Closed TujinLee closed 1 month ago

fritx commented 1 month ago

@TujinLee 我看目前vue-at代码handleKeyDown基本上都是有调用e.preventDefault和e.stopPropagation的 https://github.com/fritx/vue-at/blob/vue2/src/At.vue#L248

不过绑定的地方是用的@keydown.capture https://github.com/fritx/vue-at/blob/vue2/src/AtTemplate.vue#L9

具体情况我还没空看,不过我有个临时解决的提议:在你 @keyup.enter.native="xxxxx"函数中判断e.currentTarget这个元素是否是<el-input>元素的外面(或者是否是在.atwho-wrap元素的里面),如果是则是来自vue-at触发的 不知你这边是否方便这么做

TujinLee commented 1 month ago

@TujinLee 我看目前vue-at代码handleKeyDown基本上都是有调用e.preventDefault和e.stopPropagation的 https://github.com/fritx/vue-at/blob/vue2/src/At.vue#L248

不过绑定的地方是用的@keydown.capture https://github.com/fritx/vue-at/blob/vue2/src/AtTemplate.vue#L9

具体情况我还没空看,不过我有个临时解决的提议:在你 @keyup.enter.native="xxxxx"函数中判断e.currentTarget这个元素是否是<el-input>元素的外面(或者是否是在.atwho-wrap元素的里面),如果是则是来自vue-at触发的 不知你这边是否方便这么做

您好,我刚测试了一下。currentTarget都是class="el-textarea"这个dom,也合理。因为我这个el-input正常情况是需要监听到用户enter自动提交输入文本。此时给它包了一层vue-at,@弹出用户列表enter选中目标用户,此时光标还聚焦在el-input上,所以也触发了enter回调。我的需求就是enter选中用户后,拦截掉el-input的enter。仅在没有弹出@用户列表时,才正常的去进行enter。我感觉我这个场景应该不少见吧,就跟微信输入框一样,@用户之后还可以继续输入文本。

fritx commented 1 month ago

@TujinLee 你试试把keyup改成keydown--@keydown.enter="xxxxx",因为vue-at处理的是keydown并且stopPropagation,按理来说是不会触发input的keydown的

fritx commented 1 month ago

我在这个demo里初步试了下,el-textarea是ok的 vue-at拦截了enter的keydown(keyup由于延时比较高所以我们一般不会处理) https://we-demo.github.io/vue-at-vite-app/

image
TujinLee commented 1 month ago

@TujinLee 你试试把keyup改成keydown--@keydown.enter="xxxxx",因为vue-at处理的是keydown并且stopPropagation,按理来说是不会触发input的keydown的

这方案可行