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

Question

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

Answer 1

用具有append类名的 div 包裹您的按钮：

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

该类应具有以下 CSS 规则：

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

现场演示

Answer 2

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

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


    <template #append-item>

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