如何使附加项在 v-select vuetify 中始终可见

Question

我有一个 vuetify v-select 下拉菜单。我在里面做了一个插槽#append-item，其中有一个按钮“验证” 当我在下拉列表中滚动时，我希望按钮始终可见。

Answer 1

用名称 append class 的 div 包装您的按钮 :

 <template #append-item>
              <div class="append">
                <v-btn color="primary">valider</v-btn>
              </div>
 </template>

class 应具有以下 css 规则：

.append{
  position:sticky;
  bottom:8px;
  width:100%;
  display:flex;
  justify-content :center;
  background :white;
  
}

LIVE DEMO

Answer 2

我将此样式添加到我的“验证”按钮并且有效：

.append {
  position: sticky;
  bottom: 0;
  background: white;
}


    <template #append-item>

      <div class="append">
        <v-btn color="primary">
          Validate
        </v-btn>
      </div>
    </template>

如何使附加项在 v-select vuetify 中始终可见

How to make an append item always visible in v-select vuetify

vue.js

nuxt.js

vuetify.js

v-select