Ant Vue a-select选择器修改样式
在使用阿里的 Ant Design Vue时,在使用有下拉菜单 a-select 等组件,会发现更改不了样式分析原因通过仔细查看Dom元素可以发现,官方Select选择器下拉框是直接插入body标签中,与最外级id为app的div同级,所以在Vue中无论怎么写css都无法覆盖到下拉框样式。a-select 代码需要这么写<a-select :getPopupContainer="(trigg
·
在使用阿里的 Ant Design Vue 时,在使用有下拉菜单 a-select 等组件,会发现更改不了样式
分析原因
通过仔细查看Dom元素可以发现,官方Select选择器下拉框是直接插入body标签中,与最外级id为app的div同级,所以在Vue中无论怎么写css都无法覆盖到下拉框样式。
- a-select 代码需要这么写
<a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ></a-select>
- a-date-picker 代码需要这么写,这里就不一一举例了,看看文档就行了
<a-date-picker :getCalendarContainer="(triggerNode) => triggerNode.parentNode" />
- 或者可以手动指定到对应的节点上,举例一个,其他一样
<a-select :getPopupContainer="() => document.getElementById('xxx')" ></a-select>
通过上面官方自带的 (triggerNode) => triggerNode.parentNode
设置上,保证当前悬浮框是在使用组件内部的,不会放到别的地方去,
官方文档:
更多推荐
已为社区贡献25条内容
所有评论(0)