css - 验证 : custom footer for Autocomplete component

Question

我需要使用 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

当您首先关注自动完成组件时，它似乎工作正常。但是，再次单击它后，包含较低内容的菜单将被停用。此外，当点击自动完成最右边的部分时，只会显示包含自动完成元素的列表。

当自动完成列表这样做时，我需要较低的内容来切换，或者添加此固定底部的任何其他替代方法。

Answer 1

你可以使用 item slot，看起来很丑但确实有效，即使在 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>