AntDesignVue中弹窗modal组件的wrapClassName属性详解

解决modal弹出时无法点击蒙版下按钮的解决方案

近些天我在前端开发过程中遇到了这样一个需求：

• 选择站点后modal弹出
• 仍然可以选择其他模型参数，modal动态变化

在ant中的该modal组件最外层默认带有一层蒙版，z-index：999，如果想要在对话框弹出时可以点击蒙版下的其他按钮，必须要对这个蒙版下手。

解决方案

其实这里的解决方案有还挺多，但是由于我第一层包了地图，所以我也就抛弃了其他的方法，使用ant design of vue 中modal提供的 wrapClassName属性

wrapClassName：了解更多

这个属性的作业是:定义对话框外层的外层的类名。大白话翻译一下就是：给modal组件中弹出层依赖的父容器起一个类名，也就是蒙版。

代码示例

页面：
   <a-modal
      @cancel="closed"
      :mask="false"
      :centered="true"
      :zIndex="999"
      :body-style="{minHeight: '600px'}"
      :width="tableWidth-480"
      :loading="realsLoading"
      :confirmLoading="true"
      :footer="null"
      :maskClosable="false"
      :wrapClassName="test"
      :visible="projectVisible"
    >
      <template slot="title">
        <a-row>
          <a-col :span="12">
            <a style="margin-right: 37px;color: #87AFE1">
              ********
            </a>
          </a-col>
        </a-row>
      </template>
      <a-table
        :columns="projectColumns"
        :data-source="project"
        :pagination="false"
        size="small"
        rowKey="id"
        :locale="{emptyText:'暂无数据'}"
        :loading="projectLoading"
        :row-selection="{selectedRowKeys:keys,onChange:projectSelection, columnTitle: '选择',type: 'radio'}">
        <template slot="user" slot-scope="text, user">
          {{ user.user | empty }}
        </template>
        <template slot="nsce" slot-scope="text, nsce">
          {{ nsce.nsce | empty }}
        </template>
        <template slot="bias" slot-scope="text, bias">
          {{ bias.bias | empty }}
        </template>
        <template slot="errp" slot-scope="text, errp">
          {{ errp.errp | empty }}
        </template>
        <template slot="errt" slot-scope="text, errt">
          {{ errt.errt | empty }}
        </template>
        <template slot="operation" slot-scope="text, operation">
          <a @click="onDelete(operation)">
            <a-icon type="delete" />
          </a>
        </template>
      </a-table>
    </a-modal>
data:
export default {
data (){
 tableWidth: window.innerWidth,
      test: 'top-200',
}
样式：
.top-200{
  top: 65px;
  right: 384px;
  border: 1px solid red;//演示加的，用的时候删掉就好
}

}

效果展示

• 外层蒙版位置已被移动

• 点击后也能正常展示

最后：其实这对很多人来说不算是可以写博客记录的问题，可能是我之前更多的精力都放在了后端，对前端不太熟悉，再次也提醒自己，注意细节，多看文档，多多学习。

总结

解决问题的方式有很多种，选择很重要，写这个博客只为了记录当下解决问题的思路，如果能帮助到你那就更好了，希望不要搬运，谢谢。