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

Question

我正在尝试创建v-text-field带有名为插槽append且插槽包含按钮的 Vuetify。一切工作正常，除了我的点击点击按钮并聚焦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但这会破坏我的组件槽逻辑，然后我应该开始使用预定义的道具，这不是我想要的。

Answer 1

从您显示的代码中，您可以跳过所有用法slot，并使用 inappend和@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"