如何使用渲染函数定义Vue事件修饰符？

Question

我正在尝试创建一个带有

render()

函数和

withModifiers

的 Vue 应用程序。但不知何故，

keyup.enter

事件无法按预期工作：它会针对每个键触发，而不仅仅是 Enter 或 Return 键。

这是一个最小的例子：

<html>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script>
      const app = Vue.createApp({
        render() {
          return Vue.h("input", { onKeydown: Vue.withModifiers((e) => console.log(e), ["enter"]) });
        },
      }).mount("#app");
    </script>
  </body>
</html>

我错过了什么？

Answer 1

tl；博士

Vue 的创建者 Evan 在 2021 年的建议是自己处理关键事件，而不是依赖withKeys

（下面的示例实现）：

[...] 暴露 withKeys

 可以让我们了解它的工作原理，并防止未来内部实现中潜在的变化。

在另一期中，他们表示不会记录

withKeys

，因为它被标记为私有，但

withModifiers

 也是如此。

如果可能的话，我不想依赖私人的东西，所以我

在那里提出了这个问题。

详情

我遇到了同样的问题，并查看了源代码以更好地了解发生了什么。

withModifiers

功能

防止某些事件，但不能防止常规按键上的按键（a、b、enter、space等）。

它处理修饰键（

ctrl、alt等）确实有意义，但它也接受stop

、

prevent

和鼠标按钮按下（我猜，这意味着作为事件的修饰符） ？）。

其中一个问题中有

一个实现示例（尚未测试）：

export const withEnter = (fn: (...args: any[]) => any) => ({
  key,
}: {
  key: string
}): any => key === 'Enter' && fn()

如何使用渲染函数定义Vue事件修饰符？

问题描述投票：0回答：1

1个回答

tl；博士

最新问题

如何使用渲染函数定义Vue事件修饰符？

问题描述 投票：0回答：1

1个回答

tl；博士

最新问题

问题描述投票：0回答：1