Блог

Главная - Вопросы по программированию - Как использовать кнопку внутри слота для надписей v-текстового поля

Как использовать кнопку внутри слота для надписей v-текстового поля

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Мне нужно вставить интерактивную кнопку внутри 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.

С уважением, Ян

Комментарии:

1. я не думаю, что это правильный путь, вы можете просто поместить кнопку в текстовое поле с помощью css я не совсем понимаю, чего вы хотите, но я уверен, что есть способы получше

2. Привет, Младен. Спасибо за ваш ответ. Боюсь, это может быть проблематично при обработке изменения размера экрана

Ответ №1:

Вы должны перезаписать события указателя на вводимое .v-label правило CSS.

Vuetify устанавливает метку внутри v-текстового поля следующим образом:

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

Таким образом, изменение его на auto позволит вашей кнопке внутри метки v-text-field стать объектом событий указателя, просто помните о глубоких селекторах при работе со scoped стилями в вашем компоненте.

 .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.