Question

我正在尝试使用名为v-text-field的插槽创建Vuetify的append，并且插槽包含按钮。一切正常，除了我的点击单击按钮并聚焦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的用法，并在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"

Answer 2

尝试在您的<div id='parent'> <label id='caption'>Name</label> <input type='text'/> </div>中添加@click:append=""

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

2 个答案: