向 Vuetify 的列表/菜单/组合框添加页脚

Posted 2023-02-22

【中文标题】向 Vuetify 的列表/菜单/组合框添加页脚

【英文标题】：Adding footer to Vuetify's list/menu/combobox

【发布时间】：2019-02-04 05:35:41

【问题描述】：

我正在尝试向 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->
    <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>

【问题讨论】：

我之前做过类似的事情codepen.io/anon/pen/zJKVmK 不确定是否可以？这是你的意思吗？你忘了提供一个最小的 codepen 示例，所以我只是略过。

@Traxo 你的版本和我的一样。它在您的版本中默认隐藏。我希望它是可见的。

什么意思？页脚在我的代码笔中始终可见（打开菜单后），即使在滚动时也是如此。至少在铬？也许我误解了什么。

是的，它工作得非常完美，正是我想要的。我第一次在手机上打开，所以我认为它是一样的。

如果可能的话，你可能想要这样的东西 codepen.io/anon/pen/zJoZwd 我不知道为什么我最初选择我的第一个例子，我想是因为 combobox 等人使用 v-list-tile 作为模板（插槽）默认？因此，您不能添加与列表相同级别的 div，只能添加新项目？哈，想不起来了。如果有人对此没有提供正常的解决方案，我稍后会进一步研究。

【参考方案1】：

Codepen

我们需要将max-height 和overflow: auto 添加到v-list 元素，以便我们可以滚动列表，而不是整个菜单。 在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="" 来阻止它关闭菜单。