Блог

Главная - Вопросы по программированию - Показывать всплывающую подсказку в раскрывающихся элементах автозаполнения с помощью Vuetify

Показывать всплывающую подсказку в раскрывающихся элементах автозаполнения с помощью Vuetify

#javascript #vue.js #vuetify.js

#javascript #vue.js #vuetify.js

Вопрос:

Я новичок в Vue.js и Vuetify

Проблема — показывать всплывающую подсказку для каждого раскрывающегося элемента в v-автозаполнении

Решение — добавлен компонент v-tooltip в шаблоне элемента

Код:

 var app = new Vue({
  el: "#app",
  data: {
    items: [{
        value: 0,
        text: "Matthews Webb"
      },
      {
        value: 1,
        text: "Teresa Ward"
      },
      {
        value: 2,
        text: "Cervantes Swanson"
      },
      {
        value: 3,
        text: "Helga Cooper"
      },
      {
        value: 4,
        text: "Solomon Jensen"
      },
      {
        value: 5,
        text: "Eliza Delgado"
      },
      {
        value: 6,
        text: "Dickson Parks"
      },
      {
        value: 7,
        text: "Etta Glenn"
      },
      {
        value: 8,
        text: "Alma Durham"
      },
      {
        value: 9,
        text: "Rosemary Conner"
      }
    ],
    selected: []
  }
});  
 <link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-autocomplete :items="items" v-model="selected" clearable multiple>
          <template v-slot:item="data">
            <v-tooltip right>
              <template slot="activator" slot-scope="{ on }">
                <v-list-tile-action>
                  <v-checkbox v-model="selected" :value="data.item.value"></v-checkbox>
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title v-html="data.item.text" v-on="on"></v-list-tile-title>
                </v-list-tile-content>
              </template>
          <span>{{ data.item.text }}</span>
          </v-tooltip>
          </template>
        </v-autocomplete>
      </v-container>
    </v-content>
  </v-app>
</div>

Проблемы после внедрения решений:

  1. Флажки не доступны для просмотра, или элемент не может быть выбран, если нажать на флажок
  2. При поиске элемента некоторые из флажков отображаются выбранными

Vue Version — 2.6.12

Версия Vuetify — 1.5.24

Есть ли какой-либо другой способ показать всплывающую подсказку в раскрывающихся элементах автозаполнения, не нарушая функциональность, или в моем решении есть какая-либо ошибка

Ответ №1:

Решение:

v-input--selection-controls__ripple Div перекрывает поле ввода элемента управления выбором; следовательно, вместо этого привязывается к щелчку. Чтобы исправить это, я применил простой взлом CSS. Концептуально расположите ее выше, используя position и z-index:-10 для div. это иллюстрируется изменениями, отмеченными ниже как /* <--------------- */ 

 <div class="v-input__slot">
    <div class="v-input--selection-controls__input">
        <input aria-checked="false" role="checkbox" type="checkbox" value="1" style="
        position: relative; /* <--------------- */
        ">
        <div class="v-input--selection-controls__ripple" style="
        position: absolute; z-index: -10; /* <--------------- */        
        "></div>
        <i aria-hidden="true" class="v-icon material-icons theme--light">check_box_outline_blank</i>
    </div>
</div>