更改 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;">

如果我直接在inspector中修改min-width参数，就可以成功改变下拉框的宽度

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

我试过了：

将 class 添加到模板 v-slot:item -> 不可能
更改 v-autocomplete 内容的样式，因为 v-combobox 是 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>

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

Change width of dropdown menu of v-combobox

css

combobox

vue.js

vuetify.js