更改 v-combobox 下拉菜单的宽度

Question

我正在尝试制作一个像 Gitlab 仪表板中的那样的多重搜索过滤器。

为此，我使用 Vuetify v-combobox，如下所示：

    <v-combobox
        id="mycombo"
        v-model="model"
        :items="items"
        multiple
        small-chips
    >
        <template v-slot:item="{ index, item }" >     
            <v-icon>
                {{item.icon}}
            </v-icon>
            <span>
                {{ item.text }}
            </span>                 
        </template>
    </v-combobox>

我遇到的第一个障碍是改变下拉菜单的宽度。当我在浏览器中检查时，我看到一些元素样式：

    <div class="v-menu__content theme--light menuable__content__active v-autocomplete__content" style="max-height: 304px; min-width: 1543px; top: 193px; left: 308px; transform-origin: left top; z-index: 8;">

如果我直接在检查器中修改 min-width 参数，我可以成功更改下拉列表的宽度。

我的问题是如何在代码中（最好是在作用域 CSS 中）做同样的事情？

我试过 ：

• 将类添加到模板 v-slot:item -> 不可能
• 由于 v-combobox 是 v-autocomplete 的子项，因此更改 v-autocomplete 内容的样式：

    .v-menu__content .menuable__content__active .v-autocomplete__content {
        min-width: 250px !important;
    }

• 我读到了有关深度样式的内容，但无法理解如何在这种情况下使用它

vue 组件样式化的一般流程是什么？

感谢您的阅读，祝伙伴们节日快乐！

Answer 1

您可以将 :menu-props 用于您的样式：

 <v-combobox
     id="mycombo"
     v-model="model"
     :items="items"
     multiple
     small-chips
     :menu-props="{ minWidth: '250', maxHeight: '600' }"
 >
   <template v-slot:item="{ index, item }">
     <v-icon>
       {{ item.icon }}
     </v-icon>
     <span>
        {{ item.text }}
     </span>
   </template>
 </v-combobox>