此前一直不知道如何去修改modal对话框的样式,没错去改ant-modal-header 这些样式都没反应。今天看到了它给点API里面有一个getContainer
getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => |
当不设置它时,是挂载到body下面。
<div class="zr">
<a-button type="primary" @click="showModal" >Open Modal</a-button>
<div ref="modal" class="modal">
<a-modal
v-model:visible="visible"
title="1"
@ok="handleOk"
width="624px"
height="356px"
opacity="1"
class="asddaasd"
:getContainer="() => $"
>
<div class="home">
<div class="modelsone">
<InfoCircleFilled />
</div>
<div class="modelstwo">提示</div>
<div class="modelsthr">
想要使用该功能吗?请联系客服完成订购即可继续使用
</div>
</div>
</a-modal>
</div>
</div>
<style scoped lang='less'>
:deep(.modal .ant-modal-header) {
width: 1000px;
}
</style>