1

antdv Modal(对话框)全屏时被覆盖问题解决

 1 year ago
source link: https://chegva.com/5538.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

antdv Modal(对话框)全屏时被覆盖问题解决

最近遇到了个问题：表格全屏时，调用弹窗显示不出来，退出全屏时，弹窗其实是在的。网上查了下，还是有相关资料的。

原因如下：

全屏的元素是没法被其它元素覆盖的，除非这个元素是全屏子元素。在使用Modal时，可选择是否挂载到某个HTML节点，一般会选择不挂载，这样Modal会默认挂载到和<div id="app"></div>同一级别下的节点上，遮罩会将app里面的内容覆盖，导致app里面的内容无法使用，只要把Modal关了就可以继续使用。而当我们想用背景的内容来操纵Modal里面的数据的时候，往往需要操作app里面的内容，例如点击按钮等等。这个时候就需要把Modal绑定到指定的节点上，一般可以选择在使用<a-modal>的同级别下新建一个div来让它挂载。

解决方法：

通过阅读AntDesign的官方文档得知有弹出层的组件都有一个名为 getPopupContainer 的属性即浮层渲染父节点，默认是渲染到 body 上Tooltip、Popconfirm、Popover 、Select等组件都有该属性。

<div class="action-columns" ref="root">
    <a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root">
      <div slot="title">
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示
        <a-button @click="resetColumns" style="float: right" type="link" size="small">重置</a-button>
      </div>
JavaScript

像Modal和Notification组件虽然没有 getPopupContainer 属性，但有一个 getContainer 属性可以用于配置渲染节点的输出位置，我们只需要将这个属性指定到我们全屏的Div上即可。首先声明一个函数用于绑定全屏元素：

const getContainer = () => {
    return document.getElementById("fullscreen")
}
JavaScript

然后在Modal组件里注入属性：

// 使用id定位全屏元素
<advance-table id="fullscreen" :columns="columns" :data-source="dataSource" ... />

// 调用对话框
<xm-modal ref="handleElasticGroupRef" :config="elasticGroupConfig" ... />

elasticGroupConfig: {
         title: '新建弹性组',
         width: '880px',
         hideFooter: true,
         getContainer: getContainer,
         onOpen: () => {
             if (this.elasticGroupModel.id === 0) {
                 this.elasticGroupConfig.title = '新建弹性组'
             } else (this.elasticGroupModel.id === 1) {
                 this.elasticGroupConfig.title = "编辑弹性组"
             }
         },
         onClose: () => {
             this.formReset()
         },
     },

// 封装的Modal对话框组件
<template>
  <div>
    <a-modal
      :zIndex="config.zIndex || 1001"
      :width="config.width || 520"
      :title="config.title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :getContainer="config.getContainer"
      @ok="handleOk"
      @cancel="close"
      class="xm-modal"
      :footer="config.hideFooter ? null : undefined"
    >
     ......
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      required: true,
    },
  },
  ......
JavaScript

这样表格全屏时，弹窗也可以正常显示出来了。

安志合个人博客，版权所有 丨 如未注明，均为原创 丨 转载请注明转自：https://chegva.com/5538.html | ☆★★每天进步一点点,加油!★★☆ | 

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK