如何更改 Vuetify v-autocomplete 菜单边框半径样式?
How to change Vuetify v-autocomplete menu border radius style?
我想更改 v-autocomplete
下拉列表的框样式,并为下拉列表提供 border-radius
样式,如下图所示。
目前我的设计如下图所示。
到目前为止,我已经将菜单道具 属性 直接提供给 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
?
如有任何帮助,我们将不胜感激。
使用menu-props: { rounded }
对于Vuetify的圆角菜单边框,可以使用名为rounded
的菜单属性,避免直接修改CSS。将其与其他 menu-props
:
一起传递
:menu-props="{
nudgeBottom: 15 + 'px',
zIndex: 2,
allowOverflow,
rounded: 'xl' // <-- Here ✅
}"
在 Vuetify Border radius 页面上,您可以看到它接受的一些值:
- 0
- sm
- md
- lg
- xl
- 丸
- 圆形
xl
值似乎最符合您的图片。这是一个demo
-或-修改CSS
或者,如果您想直接修改 CSS,请使用比 Vuetify 默认选择器更具体的选择器。例如:
.v-application .v-autocomplete__content.menuable__content__active {
border-radius: 100px !important;
}
!important
是取代 Vuetify 自己的 !important
所必需的
我想更改 v-autocomplete
下拉列表的框样式,并为下拉列表提供 border-radius
样式,如下图所示。
目前我的设计如下图所示。
到目前为止,我已经将菜单道具 属性 直接提供给 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
?
如有任何帮助,我们将不胜感激。
使用menu-props: { rounded }
对于Vuetify的圆角菜单边框,可以使用名为rounded
的菜单属性,避免直接修改CSS。将其与其他 menu-props
:
:menu-props="{
nudgeBottom: 15 + 'px',
zIndex: 2,
allowOverflow,
rounded: 'xl' // <-- Here ✅
}"
在 Vuetify Border radius 页面上,您可以看到它接受的一些值:
- 0
- sm
- md
- lg
- xl
- 丸
- 圆形
xl
值似乎最符合您的图片。这是一个demo
-或-修改CSS
或者,如果您想直接修改 CSS,请使用比 Vuetify 默认选择器更具体的选择器。例如:
.v-application .v-autocomplete__content.menuable__content__active {
border-radius: 100px !important;
}
!important
是取代 Vuetify 自己的 !important