【a-modal】解决修改modal弹框样式无效的问题

前言
在vue项目中，给ant-design的modal组件通过样式穿透直接添加样式是无效的，必须依赖官方提供的API：getContainer方法将modal挂载到其父元素上，这样才能给它添加样式。而modal默认挂载到 body上，即直接插入到了body元素中，脱离了父元素，故局部样式无法在body下脱离了父组件的模态框上面去生效，但是如果使用全局样式，则会污染其他界面样式，所以只能在父组件下对应生效，即把 modal 挂载到父元素上。

解决步骤

1.指定 Modal 挂载的 HTML 节点

• ref="refModal"
• :getContainer="()=>$refs.refModal"

2.选择合适的深度（穿透）选择器修改CSS

• 如v::deep

代码示例

<div ref="refModal" class="modalBox"> 
      <a-modal
        :title="modalTile"
        v-model="modalVisible"
        :getContainer="()=>$refs.refModal"
        :dialog-style="{left: '120px',top: '423px'}"
        :bodyStyle ="{height: '450px',paddingTop: '0'}"
        :footer="null"
        @cancel="modalCancel"
      > 
        API：getContainer
      </a-modal>
</div>

 .modalBox ::v-deep .ant-modal{
    padding-bottom: 0px;
  }