javascript - Vuetify 文本字段附加槽内的按钮点击

Question

我正在尝试使用名为 append 的插槽创建 Vuetify 的 v-text-field ，并且该插槽包含按钮。一切工作正常，除了我的点击点击按钮并聚焦 text-field 和移动打开键盘。

这是我的文本字段组件

<v-text-field
    class="search-input"
    solo
    hide-details
    rounded
    elevation-12
    :placeholder="searchFieldPlaceholder"
    aria-label="Search"
    @input="searchDidChange"
  >
    <slot slot="append" name="end" />
</v-text-field>

这是我的按钮，当我调用文本字段组件时，其中包含 @click.stop

<template v-slot:end>
    <v-btn
      text
      icon
      class="ml-2"
      aria-label="List view"
      @click.stop="gridView = !gridView"
    >
      <v-icon>view_list</v-icon>
    </v-btn>
</template>

我的问题是如何停止按钮在 v-text-field 内传播？我也尝试了@click.native，效果是一样的。文档还提到了 @click:append 但这会破坏我的组件槽逻辑，然后我应该开始使用预定义的 props，这不是我想要的。

Answer 1

从您显示的代码中，您可以跳过所有 slot 用法，并在 append 和 @click:append 中使用

所以你的代码看起来像这样:

<v-text-field
       class="search-input"
       solo
       hide-details
       rounded
       elevation-12
       :placeholder="searchFieldPlaceholder"
       aria-label="Search"
       @input="searchDidChange"
       append-icon="view_list"
       @click:append="gridView = !gridView"
/>

不推荐，但这是一种不可行的方法

更改您的@click 以执行以下操作:

$refs.searchInput.blur(), gridView = !gridView

并将以下内容添加到v-text-field

ref="searchInput"