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
样式,所以在修改的时候需要按照源码中提示的层级结构进行修改
效果: