如何更改V-AutoComplete菜单边框半径样式？ [英] How to change Vuetify v-autocomplete menu border radius style?

问题描述

我要更改v-autocomplete下拉列表的框样式，并为下拉列表指定border-radius样式，如下图所示。

到目前为止，我设计的内容如下图所示。

到目前为止，我已经将menu-props属性直接赋予了v-autocomplete标记：

<v-autocomplete
  :menu-props="{
    nudgeBottom: 15 + 'px',
    zIndex: 2,
    allowOverflow
  }"
  :items="searchBarInfo"
  rounded
  outlined
  filled
  clearable
  item-color="deep-purple"
  height="50"
  placeholder="Search the ..."
  color="rgba(0, 0, 0, 0.7)"
  background-color="white"
  prepend-inner-icon="mdi-magnify"
  class="my-text-style "
  :no-data-text="($vuetify.noDataText = 'Nothing found')">
</v-autocomplete>

以上代码仅添加v-autocomplete标记，而不添加border-radius样式。

有没有办法制作像您用Vutify的v-autocomplete看到的图像一样的图像？

如有任何帮助，我们将不胜感激。

推荐答案

使用menu-props: { rounded }

对于Vutify的圆形菜单边框，您可以使用名为rounded的Menu属性来避免直接修改CSS。将其与其他menu-props一起传递：

:menu-props="{
  nudgeBottom: 15 + 'px',
  zIndex: 2,
  allowOverflow,
  rounded: 'xl'      // <-- Here ✅
}"

在"注册"Border radius页面上，您可以看到它接受的一些值：

• 0
• sm
• md
• LG
• XL
• 避孕药
• 圈

xl值似乎与您的图像最匹配。这里有一个demo

-或-修改CSS

或者，如果要直接修改CSS，请使用比Vutify默认值更具体的选择器。例如：

.v-application .v-autocomplete__content.menuable__content__active {
  border-radius: 100px !important;
}

^{!important取代Vutify自身的!important}

这篇关于如何更改V-AutoComplete菜单边框半径样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！