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

Question

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

1

Фон

Я использую компонент Material Vue AutoComplete для предоставления функций 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>

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

Автозаполнение ссылок

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

Когда я проверяю AutoComplete с помощью инструментов Chrome Dev, я расширяю div, и это то, на что похоже,

Предложение Container Div -

Вопрос

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

wuno 28 окт. 2018, в 07:16

Источник

0

Итак, элемент, который содержит текст для переноса в word-wrap: break-word для этого конкретного размера носителя?
Ohgodwhy 28 окт. 2018, в 05:31
0

Вы спрашиваете меня, что это за элемент? Если так, я не знаю, что меня беспокоит. Я не могу понять, как сохранить DIV видимым в DOM, и я не могу понять, какие элементы / классы мне нужно переопределить, чтобы решить проблему. Я попытался добавить как можно больше изображений, чтобы помочь объяснить это, потому что мне было трудно устранять неполадки.
wuno 28 окт. 2018, в 05:46
0

Я обновил свой вопрос. Мне удалось развернуть элемент, содержащий контейнер предложений. Если у вас есть идеи, что делать, пожалуйста, дайте мне знать.
wuno 28 окт. 2018, в 05:59

Показать ещё 1 комментарий

Теги:

javascript

vue.js

css

material-design

1 ответ

Ещё вопросы

Итак, элемент, который содержит текст для переноса в word-wrap: break-word для этого конкретного размера носителя?
Вы спрашиваете меня, что это за элемент? Если так, я не знаю, что меня беспокоит. Я не могу понять, как сохранить DIV видимым в DOM, и я не могу понять, какие элементы / классы мне нужно переопределить, чтобы решить проблему. Я попытался добавить как можно больше изображений, чтобы помочь объяснить это, потому что мне было трудно устранять неполадки.
Я обновил свой вопрос. Мне удалось развернуть элемент, содержащий контейнер предложений. Если у вас есть идеи, что делать, пожалуйста, дайте мне знать.

Richard Matsen · Accepted Answer · 2018-10-28T19-46-00.000Z

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

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

шаблон

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

директива

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