Материал для укладки Vue Автозаполнение выпадающий список

Question

Фон

Я использую компонент автозаполнения Material Vue, чтобы предоставить функциональность TypeAhead моим пользователям в приложении vue.

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

Проблема

Я не могу понять, как добавить стили, чтобы исправить вышеупомянутую проблему.

Пример

<div class="md-layout md-gutter">
<div class="md-layout-item md-small-size-100">
<md-autocomplete 
  v-model="currentCustomer"
  :md-options="customers" 
  @md-changed="getCustomers" 
  @md-opened="getCustomers"
  @md-selected="getSelected"
  :md-fuzzy-search="false"
 >
 <label>Search Customers...</label>
 <template slot="md-autocomplete-item" slot-scope="{ item, term }">
 <md-highlight-text :md-term="term">{{ item.email }}</md-highlight-text>
 </template>
<template slot="md-autocomplete-empty" slot-scope="{ term }">
 No customers matching "{{ term }}" were found. <a @click="addSearchedCustomer(term)">Create </a>this customer.
</template>
</md-autocomplete>
</div>

В частности, эта строка исчезает с экрана при отсутствии результатов поиска,

<template slot="md-autocomplete-empty" slot-scope="{ term }"> No customers matching "{{ term }}" were found. <a @click="addSearchedCustomer(term)">Create </a>this customer.</template>

Пример изображения

Link AutoComplete

ОБНОВЛЕНИЕ Что я пробовал

Когда я проверяю автозаполнение с помощью Chrome Dev Tools, я раскрываю div, и вот как это выглядит,

Предложение контейнера Div -

Вопрос

Глядя на документацию, я не могу показатьсячтобы найти способ справиться с этим.Как я могу применить стили к этому блоку предложений, чтобы он разбивал текст по мере уменьшения экрана?

Answer 1

Шаблонный слот не реагирует на стили переноса слов (но другие стили, такие как цвет, работают).

Один из способов, хоть и немного неприятный, - это использовать <label style="white-space: pre-wrap;"> для получения многострочной метки и использовать директиву для установки высоты.

шаблон

<md-autocomplete v-model="value" :md-options="colors">
  <label>Color</label>

  <template slot="md-autocomplete-item" slot-scope="{ item, term }">
    <span class="color" :style="`background-color: ${item.color}`"></span>
    <label v-wrapit
      style="white-space: pre-wrap;" 
      >{{item.name}}</label>
  </template>

  <template slot="md-autocomplete-empty" slot-scope="{ term }">
    <label v-wrapit 
      style="white-space: pre-wrap;" 
      >No colors matching "{{ term }}" were found</label>
  </template>

1012 * Директива *

<script>
  export default {
    name: 'AutocompleteTemplate',
    directives: {
      wrapit: {
        inserted: function (el, binding, vnode) {
          el.style.height = `${el.scrollHeight}px`
          el.style.color = 'red'
          console.log('el', el.scrollHeight, el.offsetHeight, el)
        }
      }
    },
    data: () => ({
      value: null,
      colors: [
        { name: 'Aqua blue blue blue blue blue', color: '#00ffff' },
        { name: 'Aquamarine blue', color: '#7fffd4' },
      ]
    }),

стиль

Этот стиль устанавливает общую ширину списка. Это не ограничено, потому что меню появляется за пределами <div id="app">

<style>
  .md-menu-content {
    width: 200px !important;
  }
</style>

Вот CodeSandbox для игры.