Vuetify textarea - 事件传播实际上是如何工作的？

Question

我遇到了一个奇怪的情况，使用以下组件：

<template>
  <v-app>
    <v-container>
      <v-menu v-model="menu" :close-on-content-click="false">
        <template #activator="{ props }">
          <v-btn v-bind="props"> Open </v-btn>
        </template>
        <v-card>
          <v-card-text>
            <v-form>
              <v-textarea label="sample text"></v-textarea>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="menu = false"> Close</v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const menu = ref(false)
</script>

Vue Playground 链接

通常，当在

v-textarea

内按 Enter 时，结果将是添加换行符。 然而，在这种情况下，打开菜单写一些东西并按 Enter 键不会执行任何操作。

如果我删除

v-card-actions

组件，按 Enter 键将添加换行符，但也会关闭菜单。这不是所需的行为（这是一个减少示例。）。

如果我随后将

@keydown.enter.stop=""

事件处理程序添加到

v-textarea

，一切都会按我的意愿进行。

由于最后一步使其工作，我怀疑事件传播中发生了一些奇怪/有缺陷的事情，或者我没有正确理解。

这是怎么回事？

Answer 1

它看起来是由 v 菜单上的 function 引起的，该函数在收到 Enter keydown 事件时运行。该函数调用

e.preventDefault()

，因此可以防止出现新行。

只要 keydown 事件在 v 菜单之前停止传播，这种情况就不会发生。您可以将

@keydown.enter.stop

移动到 v-textarea 和 v-card（包括）之间的任何元素上，然后将创建新行。