项目场景:
在使用 Ant Design Vue组件库更改Modal对话框样式使用深度作用选择符不生效。
问题描述
Modal对话框官方样式如下图:
现在要修改为下图所示样式:
使用深度作用选择符样式没有生效。
原因分析:
因为modal是直接插入到body元素中的,脱离了父元素。所以写在局部的样式,则不能在body下面脱离了父组件的模态框去生效,只能在你父组件下对应的地方生效。
解决方案:
第一种
既然是插入到了body中,就全局修改样式,但是这种方法会使整个程序中的Model样式改变(样式污染)。
第二种
通过ref="mymodal" :getContainer = '()=>$refs.mymodal' div /deep/ 要改样式的类名
<div ref="myModal">
<a-modal
cancelText="关闭"
okText="保存"
:get-container="()=>$refs.myModal"
v-model:visible="addShow"
width="100%"
wrap-class-name="full-modal"
@cancel="onClose"
destroyOnClose
title="规则录入"
@ok="handleOk"
>
...
</a-modal>
</div>
div :deep(.ant-modal-footer){
position: absolute;
right: 0;
}
:deep(.ant-modal-body){
overflow: scroll;
/*height: 100px;*/
}
补充
在改好之后,发现点击保存并没有执行对应的逻辑,而是执行了关闭,发现是左侧关闭图标宽度覆盖了保存,因此只需要给左侧图标设置一个宽度不覆盖保存按钮即可。