Vuetify: Autocomplete组件的自定义页脚

Question

Vuetify: Autocomplete组件的自定义页脚

3

我需要在使用Vuetify时的v-autocomplete组件列表中添加一些底部固定元素，就像这样：

。我尝试使用append-item插槽并将其应用于position: sticky，以便在用户滚动自动完成列表时将其固定在底部。然而，这在IE11上不起作用（我需要使用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

在首次聚焦自动完成组件时，似乎它能够正常工作。但是，在再次点击后，包含下方内容的菜单会被取消激活。此外，在单击自动完成组件的最右侧部分时，只会显示包含自动完成项的列表。

我需要当自动完成列表切换时，或者其他任何添加固定底部部分的替代方法时，使下方内容也能够切换。

- cppstudy

你想对下方内容做什么？当用户点击它时，你希望添加什么？你想如何固定该项？作为列表的最后一项还是希望用户滚动时始终显示？ - djcaesar9114

你想让它像其他的一样可选择吗？ - djcaesar9114

@djcaesar9114 不，我不想让它可选。我需要能够放置任何类型的内容。下方内容和列表之间唯一的关系是它们需要一起显示和隐藏。谢谢。 - cppstudy

好的，但是如果你有一个很长的列表，即使你没有到达列表的末尾，你是否希望显示“较低内容”？ - djcaesar9114

@djcaesar9114 是的，我需要它在列表打开时显示，无论列表的长度如何，无论我是否在列表末尾。这个下方元素应该在列表外部，但与其打开/隐藏切换绑定。 - cppstudy

显示剩余2条评论

2个回答

0

有一个解决方案：

<div id="app">
  <v-app id="inspire">
    <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
            >
              <v-list-item
                slot="append-item"
                class="grey--text">
                {{ items.length }} elements
              </v-list-item>
            </v-autocomplete>
          </template>
      </v-menu>
    </div>
  </v-app>
</div>

- djcaesar9114

对我不起作用。当项目数量增加时，下方内容不可见。下方内容只是被插入到列表的最后一个项目中，而不是在列表之外。 - cppstudy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lyde Su · Accepted Answer

您可以使用物品插槽，虽然看起来不太美观，但确实有效，即使在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>