css - Vuetify:自动完成组件的自定义页脚
问题描述
我需要使用 Vuetify 将一些底部固定的元素添加到 v-autocomplete 组件的列表中,如下所示:
我尝试使用append-item插槽并应用 position: sticky ,以便在用户滚动自动完成列表时它粘在底部。但是,这不适用于 IE11(我需要):
https://caniuse.com/#feat=css-sticky
我将无法为此项目添加任何 polyfill,因此我尝试寻找另一种替代方法。到目前为止,我已经使用 v-menu 组件将自动完成功能和菜单附加到同一个 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
当您第一次关注自动完成组件时,它似乎工作正常。但是,再次单击它后,包含较低内容的菜单将被停用。此外,当点击自动完成最右边的部分时,只会显示包含自动完成项目的列表。
当自动完成列表这样做时,我需要较低的内容来切换,或者添加这个固定底部的任何其他替代方法。
解决方案
您可以使用 item 插槽,看起来很丑但确实有效,即使在 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>
推荐阅读
- c++ - C++中两个字符相乘的结果应该是什么?
- python - 有条件地迭代并输出数据框和图表
- javascript - Socket.IO 发射不发送
- swift - 将编程创建的视图连接到 IB
- visual-studio-code - 您如何评价/评论 VS Code 的扩展?
- opencv - Unity Camera frustum 映射到物理相机
- javascript - 同步调用异步 IIFE
- c - C语言isMagicsquare函数:我的函数代码中有什么逻辑错误?
- c# - EFCore 和 C# 中的聚合之间的 DDD 和引用
- json - Powershell Core Invoke-RestMethod 给出意外字符('M'(代码 77)):预期有效值