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

Posted 2023-02-16

【中文标题】Vuetify 文本字段附加插槽内的按钮单击

【英文标题】：Button inside Vuetify's text-field append slot clicking through

【发布时间】：2020-04-12 19:21:00

【问题描述】：

我正在尝试使用名为 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，但这会破坏我的组件槽逻辑，然后我应该开始使用预定义的道具，这不是我想要的。

【问题讨论】：

你的v-btn不是在v-text-field里面吗？

@Jesper 是的。如果你知道作用域插槽是如何工作的，那么你应该明白我的按钮在v-text-field 内。在我调用我的v-text-field 组件的视图中，按钮位于组件内部。该按钮的插槽代​​码为append

这种情况下，如果您不想要输入焦点，我认为您必须使用append-outer。无需破解解决方案。

@Jesper Vuetify 正在以某种方式做到这一点，所以我认为它应该是可能的。我也尝试使用 append-outer，但这不是我想要的视觉效果。所以我想我会开始黑客攻击..

你能参考一下 Vuetify 自己在哪里做的吗？在他们的slot 示例中，他们的append 与您的完全相同

【参考方案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"

【参考方案2】：

尝试在您的v-text-field 中添加@click:append=""