【antd-vue】修改对话框 modal 的样式

问题描述

antd-vue 修改对话框 modal 的样式

解决方法

template 中添加添加一下

• <div ref="yourModal"></div>
• :getContainer="() => $refs.yourModal"

css 中在类名前加 /deep/

代码示例

<div ref="yourModal"></div>
<a-modal v-model="visible" :title="name" @ok="handleOk" @cancel="handleClose"
  :getContainer="() => $refs.yourModal"
  >
  <span>这是一个 modal</span>
  <template slot="footer">
    <a-button key="close" @click="handleClose">
      关闭
    </a-button>
  </template>
</a-modal>

/deep/ .ant-modal {
  width: 500px !important;
}

API getContainer

指定 Modal 挂载的 HTML 节点，默认挂载到 body。
修改这个规则，把 modal 挂载到 div，配合 /deep/ 即可修改样式.

css /deep/ 深度选择器