Antd select dropdown 样式修改

原创已于 2022-09-26 16:10:54 修改 · 5.2k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

唐纳德川家军

关注

标签

#vue.js #前端 #javascript

分类前端开发

于 2022-09-26 16:08:48 首次发布

本文介绍如何使用 Ant Design Vue (Antd) 的 Select 组件自定义下拉菜单样式，通过 dropdownClassName 属性及 CSS 样式实现个性化展示，并确保全屏模式下下拉框正常显示。

Antd select dropdown 样式修改

官网提供了dropdownClassName属性，链接
测试代码:

<template>
  <div class="select-container">
    <a-select
        v-model:value="select"
        :options="options"
        :getPopupContainer="triggerNode => triggerNode.parentNode"
        dropdown-class-name="dropdown-class"
        style="width: 120px"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const select = ref<string>('1')
const options = [{
  value: '1',
  label: '黄金糕'
}, {
  value: '2',
  label: '双皮奶'
}, {
  value: '3',
  label: '蚵仔煎'
}, {
  value: '4',
  label: '龙须面'
}, {
  value: '5',
  label: '北京烤鸭'
}]
</script>

<script lang="ts">
export default {
  name: 'Test'
}
</script>

<style lang="less" scoped>
.select-container {
  height: 400px;
  width: 100%;
}

:deep(.ant-select) {
  color: #44f0e9;

  .ant-select-selector {
    background: #3935c7;
    border: none;
  }

  .ant-select-arrow {
    color: #44f0e9;
  }
}
</style>

<style lang="less">
.dropdown-class {
  background-color: #3935c7;

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

:getPopupContainer="triggerNode => triggerNode.parentNode"
可以保证在按了F11进入全屏后也能显示下拉框

.ant-select-item-option-selected这些个类名可以在antd的源码中查找，根据需要去修改，路径一般在：node_modules/ant-design-vue/es/select/style/index.css

个人理解，自定义的.dropdown-class是覆盖了.ant-select-dropdown样式，所以在修改的时候需要按照源码中提示的层级结构进行修改

效果：
在这里插入图片描述