a-select dropdownClassName 使用方法

最新推荐文章于 2024-10-18 09:23:47 发布

唐纳德川家军

最新推荐文章于 2024-10-18 09:23:47 发布

阅读量864

点赞数

分类专栏： vue 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/jackliujay/article/details/129012921

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

文章展示了如何在Vue中使用<a-select>组件定制下拉菜单的样式，通过dropdown-class-name属性绑定类名，并在less中定义样式，包括选项的颜色和选中状态的背景色。注意style标签不应添加scope属性以确保样式全局生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a-select dropdownClassName 使用方法

<a-select
            v-model:value="mainTitle"
            :options="options"
            dropdown-class-name="dropdown-class"
            @change="handleTitleChange"
          />

<style lang="less">
.dropdown-class {
  background-color: rgba(57, 53, 199, 0.5);

  .ant-select-item-option {
    color: whitesmoke;
  }

  .ant-select-item-option-selected, .ant-select-item-option-active {
    color: #44f0e9;
    background-color: transparent;
  }

}
</style>