如何在 v-text-field 标签槽内使用按钮

【问题标题】：如何在 v-text-field 标签槽内使用按钮
【发布时间】：2019-08-22 00:23:43
【问题描述】：

我需要在标签槽下的 v-text-field 内插入一个可点击按钮。这意味着会有标签：“开始输入或选择搜索面板”，其中“选择搜索面板”将是一个链接或按钮。

我可以使用 v-slot:label 使其可见，但该按钮不可点击，并且 onSearchPanelClicked 未触发..

        <v-text-field class="input-field" clearable prepend-inner-icon="search" solo >
                        <template v-slot:label class="linkLabel" v-on:click="onSearchPanelClicked">
                            Start typing or <v-btn v-on:click="onSearchPanelClicked" class="link" flat > Select Search Panel</v-btn>
                        </template>
                      
       </v-text-field>

有没有办法将点击事件传递给元素？如果我开始输入，标签必须像以前在 v-text-field 上一样消失。

问候一月

【问题讨论】：

我不认为这是一种方法，你可以使用 css 将按钮定位在文本字段上我不太明白你想要什么，但我相信有更好的方法
嗨姆拉登。谢谢您的回答。恐怕在处理屏幕大小调整时这可能会出现问题

标签： vue.js vuetify.js

【解决方案1】：

您必须覆盖您的输入 .v-label CSS 规则 pointer-events。

Vuetify 在 v-text-field 中设置标签，如下所示：

.v-text-field .v-label {
  pointer-events: none; // unclickable element
}

因此，将其更改为 auto 将使您在 v-text-field 标签内的按钮成为指针事件的目标，在您的组件中使用 scoped 样式时请注意 deep selectors。

.v-input.input-field .v-label {
  pointer-events: auto;
}

/* or for scoped styles */
::v-deep .v-input.input-field .v-label {
  pointer-events: auto;
}

在此示例中，该规则仅适用于您的自定义类 .input-field 的字段，如果您想覆盖所有 v-text-fields，只需将其从 CSS 代码中删除即可。

【讨论】：