javascript - 如何更改 Vuetify v-autocomplete 菜单边框半径样式？

Question

我想更改下拉列表的框样式并为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样式。

有没有办法制作类似于您使用 Vuetify 看到的图像的东西v-autocomplete？

任何帮助，将不胜感激。

Answer 1

使用menu-props: { rounded }

对于 Vuetify 的圆角菜单边框，可以使用调用的 menu 属性rounded来避免直接修改 CSS。将它与另一个一起传递menu-props：

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

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

• 0
• sm
• MD
• lg
• XL
• 丸
• 圆圈

该xl值似乎与您的图像最匹配。这是一个演示

- 或 - 修改 CSS

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

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

^{!important是取代 Vuetify 自己的必要条件!important}