javascript - Styling Material Vue AutoComplete suggestion drop down

Question

Background

I am using the Material Vue AutoComplete component to provide TypeAhead functionality to my users in a vue application.

When the Chrome browser is minimized in width to check for responsiveness I noticed the suggestion container gets smaller in width but, the text inside of the suggestion container does not break in the box. Instead, the sentence that is being displayed runs off the box to the right of the screen.

Problem

I can not figure out how to add styles to correct the before mentioned issue.

Example

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

Specifically this line runs off the screen when there are no search results,

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

Image Example

Link AutoComplete

UPDATE What I have tried

When I inspect the AutoComplete with Chrome Dev Tools, I expand the div and this is what it looks like,

Suggestion Container Div -

Question

Looking at the documentation I can not seem to find a way to handle this. How can I apply styles to this suggestion box so it will break the text as the screen gets smaller?

标签： javascriptcssvue.jsmaterial-design

Answer 1

模板插槽似乎不响应自动换行样式（但其他样式（如颜色）确实有效）。

一种有点hacky的方法是使用 a<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>

指示

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