Problem description

In our projects, the most common layout is the navigation area on the left and the dynamic change area on the view layer on the right (sometimes with a top bar for breadcrumbs and the user avatar section). When the user clicks the navigation area on the left, the corresponding view area on the right will be dynamically switched. But it kind of gives us the illusion that the view area layer is not the whole screen, as if the view is the whole screen minus the left navigation bar and the breadcrumbs at the top of the user’s avatar. As shown below:However, if we encounter a large scene and need to display the content on the full screen, it seems that we can only make a folding effect, add an icon button to the top bar, click the icon button, and fold the navigation bar on the left. Yes, it gives more space, but the product manager wants a full screen. How to do?

implementation

Mode 1 Full screen popover (smoke screen)

In the corresponding route page to display, add a large popover, this popover fixed positioning, will be relative to the viewport, of course, need to add top:0; left:0; width:100%; height:100%; This would fill the screen, but there are potential problems with doing so. Because of the large, full-screen popup, the actual routing page does not change, and when the user clicks the browser’s back button, it goes back to the “previous routing screen”, which of course does not affect the use of routing. The other problem is that we write code in a big popover full of the screen, which makes it all coupled to a.vue file, which is not easy to maintain the code. So we can do method two here

Mode 2 The routing view layer is full

Code screenshotsEffect of screenshots

conclusion

If the product manager requires a full screen effect, use both methods. Is to open the fixed positioning layout. But option two, full screen through the view layer, is better

Preferred recommendation method 2