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

Posted 2023-02-22

【中文标题】如何使附加项在 v-select vuetify 中始终可见

【英文标题】：How to make an append item always visible in v-select vuetify

【发布时间】：2021-03-22 01:27:39

【问题描述】：

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

【参考方案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;
  

LIVE DEMO

【讨论】：

拯救我的一天，谢谢！

【参考方案2】：

我将这种样式添加到我的“验证”按钮中，并且效果很好：

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



    <template #append-item>

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