Project scenario:
技术:vue 浏览器全屏.a-model弹窗组件
I recently encountered a project requirement that enters the full-screen state in a component . There is an a-model pop-up window component in this component. In a scenario that does not work, the a-model is covered under
the full-screen state of the browser.
Problem Description
vue项目全屏状态下,ant-design中的a-model弹窗组件被覆盖
Guys, when you encounter such a situation, the first thing you think of is the problem of style hierarchy. The solution you think of is to add the style in the pop-up box. I just found out that z-index:999;
this problem is the same, but adding it has no effect.
First, let me show you my project code.
The ref="screenRef" I defined here is to get the container of this component
and then display it in full screen state.
This is the code when I made a mistake. This code is completely unaware of the seriousness of the problem. The code below is the code of my a-model pop-up box component. Did you guys
find any problems here? I am the same, hahaha
Cause Analysis:
The problem of mounting a full-screen object error
I added ref to get the container of this component to display the big screen in the component that is going to be full screen,
but when the a-model pops up, it will pop up to the body directory, which is the
same as the big screen of the container I used to display Level, so the pop-up window is covered in the big screen state
solution:
Changed the mount object for fullscreen
I mount screenRefthe object on the container that was originally mounted to the global document.documentElement,
because document.documentElementit is the initial Dom in the entire project, which is the root node.
The changed code is as follows:
so that you can use a-model in the full screen state in the component The pop-up window component, but changing the mounted object will cause some problems, that is, the height problem in the component, which will cause the entire component to appear in the full screen state, with a downward scroll bar
The reason is that the width of the component is different from the width of the external global. If we want to solve this method, write the extra part in the style of the external container of this component to hide the left scroll bar in the overflow: hidden;global
html, and use overflow-x in the body. : hidden; can solve the style problem,
but if you use document.documentElement to enter the full screen state in this component, other components will also enter the full screen state accordingly, and you jump to other vue components and you will cancel the full screen for him Status,
this pop-up window does not display the problem and it is easy to solve