Vuetify: пользовательский нижний колонтитул для компонента автозаполнения - PullRequest
Новая
       10

Vuetify: пользовательский нижний колонтитул для компонента автозаполнения

3 голосов
/ 23 февраля 2020

Мне нужно добавить элемент с фиксированным нижним значением в список компонента v-autocomplete, используя Vuetify, например:

lower content

Я пробовал используя слот append-item и применяя позицию: приклеить к ней, чтобы она прилипала к нижней части, пока пользователь прокручивает список автозаполнения. Это, однако, не будет работать для IE11 (что мне нужно):

https://caniuse.com/#feat = css -липкий

Я не смогу добавить любой polyfill для этого в мой проект, поэтому я попытался найти другую альтернативу. До сих пор я использовал компонент v-menu, чтобы присоединить и autocommplete, и меню к одному и тому же div: 

<div class="text-center">
    <v-menu content-class="menu" :attach="'.text-center'">
        <template v-slot:activator="{ on }">
            <v-autocomplete
                :attach="'.text-center'"
                class="autocomplete"
                :items="['something', 'something2']"
                color="primary"
                v-on="on"
                dark
            >
                Dropdown
            </v-autocomplete>
        </template>
        <div class="lower">
            Lower content
        </div>
    </v-menu>
</div>

https://codepen.io/codepenas/pen/YzXpMYY

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

Мне нужно нижнее содержимое для переключения, когда это происходит в списке автозаполнения, или любая другая альтернатива для добавления этого фиксированная нижняя часть.

Ответы [ 2 ]

3 голосов
/ 27 февраля 2020

Вы можете использовать слот предмета, выглядит уродливо, но работает, даже на IE11: 

<v-autocomplete 
  :items="[{ value: 'something' }, { value: 'something2' }, 'Lower content']"
>
  <template v-slot:item="data">
    <template v-if="typeof data.item === 'object'">
      <v-list-item-content v-text="data.item.value"></v-list-item-content>
    </template>
    <template v-else>
      <v-list-item-content v-text="data.item" class="red"></v-list-item-content>
    </template>
  </template>
</v-autocomplete>
0 голосов
/ 01 марта 2020

Есть решение: 

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-menu content-class="menu" :attach="'.text-center'">
          <template v-slot:activator="{ on }">
            <v-autocomplete
              :attach="'.text-center'"
              class="autocomplete"
              :items="['something', 'something2']"
              color="primary"
              v-on="on"
              dark
            >
              <v-list-item
                slot="append-item"
                class="grey--text">
                {{ items.length }} elements
              </v-list-item>
            </v-autocomplete>
          </template>
      </v-menu>
    </div>
  </v-app>
</div>
...