Question

我需要使用Vuetify将一些固定在底部的元素添加到v-自动完成组件的列表中，

我尝试使用 append-item 插槽并应用位置：粘在它上面，以便在用户滚动自动完成列表时它会粘在底部。但是，这不适用于IE11（我需要）：

我将无法为此项目添加任何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

即使在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>

Answer 2

有一个解决方案：

<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>

Vuetify：自动完成组件的自定义页脚

2 个答案: