我正在尝试将页脚插入到 Vuetify 的列表或菜单或组合框中。它们都非常相似。我尝试了所有可能的 css 解决方案,但没有解决方案。
这就是我想要的,但我希望底部按钮即使滚动也能在底部静态可见:
无论我在哪个元素上应用样式,常规的固定 css 解决方案都不起作用。
这是我要实现的组合框:
<v-combobox
style="min-width: 260px;"
dense
:value="item.description"
:items="products"
item-text="name"
item-value="id"
:error-messages="item.description_error"
:filter="filter_products"
@input="product_selected"
ref="description">
<template
slot="item"
slot-scope="{ index, item, parent }">
<v-list-tile-content v-if="!item.footer">{{ item.name }}</v-list-tile-content>
<v-btn v-else flat dark small style="padding-left:0!important;margin-left:0!important;display:table-row;width:100%"
color="primary"
depressed
:ripple="false"
@click.stop="add_new_product"><v-icon left>add_box</v-icon>{{ item.footer }}</v-btn>
</template>
</v-combobox>
还尝试使用 v-menu 和 v-list
<v-menu max-height="250px">
<v-text-field label="Hello" slot="activator"></v-text-field>
<v-list>
<v-list-tile v-for="item in 10">hello</v-list-tile>
</v-list>
<p style="position: fixed; bottom: 0;">IUWHEGIuiHWEGIUHGIWUEHGIUWHEGIUHWEIUG</p>
</v-menu>
最佳答案
我们需要在 v-list
元素中添加 max-height
和 overflow: auto
以便我们可以滚动列表,并且不是整个菜单。
将“页脚”添加到 v-menu
的底部,它应该会按预期工作。
例如,只需将其包裹在 v-card
中,这样菜单就不会透明。
<v-menu v-model="menu" offset-y>
<v-btn slot="activator">Menu</v-btn>
<v-card>
<v-list class="custom-list">
<v-list-tile v-for="item in items"></v-list-tile>
</v-list>
<v-divider></v-divider>
<div class="pa-1" @click.stop="">
<v-btn flat dark small color="primary" depressed :ripple="false">
<v-icon left>add_box</v-icon>
footer button
</v-btn>
</div>
</v-card>
</v-menu>
CSS
.custom-list {
max-height:200px;
overflow: auto;
}
我们可以使用 @click.stop=""
来防止它关闭菜单。
关于html - 将页脚添加到 Vuetify 的列表/菜单/组合框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52077281/