Original link: https://chegva.com/5538.html
I recently encountered a problem: when the form is full screen, the pop-up window cannot be displayed, and when the full screen is exited, the pop-up window is actually there. I checked online and there is still some relevant information.
The reasons are as follows:
Fullscreen elements cannot be covered by other elements unless the element is a fullscreen child. When using Modal, you can choose whether to mount it to an HTML node. Generally, you will choose not to mount it, so that Modal will be mounted to the node at the same level as <div id=”app”></div> by default. The mask will cover the content in the app, making the content in the app unusable, as long as the Modal is closed, it can continue to be used. When we want to use the content of the background to manipulate the data in the Modal, we often need to manipulate the content in the app, such as clicking buttons and so on. At this time, you need to bind the Modal to the specified node. Generally, you can choose to create a new div under the same level of <a-modal> to mount it.
Solution:
By reading the official documentation of AntDesign, we know that components with a popup layer have a property called getPopupContainer , that is, the parent node of the floating layer rendering. By default, the Tooltip, Popconfirm, Popover, Select and other components that are rendered to the body have this property.
<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" />Column display <a-button @click="resetColumns" style="float: right" type="link" size="small">reset</a-button> </div>
Like Modal and Notification components, although there is no getPopupContainer property, there is a getContainer property that can be used to configure the output position of the rendering node. We only need to assign this property to our full-screen Div. First declare a function to bind the fullscreen element:
const getContainer = () => { return document.getElementById("fullscreen") }
Then inject properties in the Modal component:
// Locate fullscreen element with id <advance-table id="fullscreen" :columns="columns" :data-source="dataSource" ... /> // call dialog<xm-modal ref="handleElasticGroupRef" :config="elasticGroupConfig" ... /> elasticGroupConfig: { title: 'New flexible group', width: '880px', hideFooter: true, getContainer: getContainer, onOpen: () => { if (this.elasticGroupModel.id === 0) { this.elasticGroupConfig.title = 'New Elastic Group' } else (this.elasticGroupModel.id === 1) { this.elasticGroupConfig.title = "Edit Elastic Group" } }, onClose: () => { this.formReset() }, }, // Encapsulated Modal dialog component <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, }, }, ......
In this way, when the form is full screen, the pop-up window can also be displayed normally.
refer to:
This article is reprinted from: https://chegva.com/5538.html
This site is for inclusion only, and the copyright belongs to the original author.