Question

我需要在标签下的v文本字段内插入可点击按钮。表示将带有标签：“开始输入或选择搜索面板”，其中“选择搜索面板”将是链接或按钮。

我可以使用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>

有什么方法可以将click事件传输到元素？如果我开始键入，标签必须像以前在v-text-field上使用的一样消失。

问候扬

Answer 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-field，只需将其从 CSS 代码中删除即可。

使用v-text-field槽使可点击按钮

1 个答案: