背景
我正在使用 Material Vue AutoComplete 组件在 vue 应用程序中为我的用户提供 TypeAhead 功能。
当 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>
图片示例
更新 我尝试过的
当我使用 Chrome 开发工具检查自动完成功能时,我展开了 div,这就是它的样子,
建议容器 Div -
问题
查看文档我似乎无法找到处理此问题的方法。如何将样式应用到此建议框,以便它在屏幕变小时打断文本?
最佳答案
模板插槽似乎不响应自动换行样式(但颜色等其他样式确实有效)。
一种方法,有点 hacky,是使用 <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一起玩。
关于javascript - 样式化 Material Vue 自动完成建议下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53028579/