This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Requirements describe

In a recent actual production project, there was an urgent need to develop a full-screen display form that looked something like this:

The requirements are described as: Click the video or picture to enlarge it or play it in the playing window shown in the figure above; The description of the picture or video is displayed in the center of the lower area. The black background area is displayed as a black translucent form covering the full screen; There is a play off button in the upper right corner, which will close the whole play area and black window background. It also requires that the browser’s back button be overridden so that when it returns, it has the same effect as clicking the close button.

z-indexTrain of thought

The most straightforward idea is to write a component that is called with its Z-index set to a large value. But in practice, the use of z-index is limited.

In the MDN official documentation, the Z-index attribute sets a Z-order for locating an element and its descendants or flex items. When elements overlap, the larger z-index element will overwrite the smaller element in the upper layer display.

Note the following points:

  1. The z-index is only at the level in the context of the current stack. Displays between children of different parent elements will be rendered according to the z-index of the parent element.

  2. Can be negative;

  3. This parameter is valid only when the position attribute is relative, Absolute, fixed, sticky.

    Therefore, in order to change the hierarchy and avoid changing the POSITION of the DOM, you sometimes need to add a separate DOM element to the Z-index, or you can’t. Of course, in more cases, the page elements are complex, so using z-index alone may require modifying the z-index of the parent level step by step, resulting in a large amount of changes and records.

    Therefore, we abandoned the idea of using z-index alone. (In fact, using z-index alone did not achieve the desired effect, there are always some things floating at the top of the page, manual dog head, so not only to tell everyone, but also to make a record of their own)

body.appendTrain of thought

mounted() {
    this.$nextTick(() = > {
      const body = document.querySelector('body')
      if (body.append) {
        body.append(this.$el)
      } else {
        body.appendChild(this.$el)
      }
    })
  },
  destroyed() {
    const body = document.querySelector('body')
    body.removeChild(this.$el)
  },

Copy the code

With the above code, this component is separated from the existing complex hierarchy components of the system to achieve the final effect of a top display overlay. Give yourself a thumbs up!

In this way, we can open up the idea of using JS to arbitrarily adjust the mount position and hierarchy of components.

The complete code is as follows :(some of the classes are not listed, but related to the page layout, such as the left and right margins of the project statistics, not posted)

<template> <div class="popContainer"> <div style="width: 100%; height: 100%;" class="flex-col-center-end"> <div class="main-area top-info center" style="height: 88%"> <div style="width: 100%; height: 75%"> <slot name="main" /> </div> </div> <div class="bottom-info main-area center"> <slot name="bottom" /> </div> </div> <el-image: SRC ="require('./ fork.png')" class="close-icon pointer" @click="close" /> </div> </template> <script> export default { name: 'ModelFullScreen', data() { return { show: false } }, watch: { show() { this.$emit('input', this.show) } }, created() { this.show = this.value }, mounted() { this.$nextTick(() => { const body = document.querySelector('body') if (body.append) { body.append(this.$el) } else { body.appendChild(this.$el) } console.log(body) }) // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- back related -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / mount is completed, Popstate if (window.history && window.history.pushState) {window.history. PushState (null, null, Document.url) // It doesn't matter if it's here or not, It is better to have window.addeventListener (' popState ', this.goback, false) // perform goBack on fallback}}, Destroyed () {// const body = document.querySelector('body') // body.removechild (this.$el) Or other vue routing page will be to monitor window. The removeEventListener (' popstate, enclosing the goBack, false) enclosing the goBack ()}, the methods: { close() { const body = document.querySelector('body') body.removeChild(this.$el) this.$emit('close') }, goBack() { const body = document.querySelector('body') if (body) { body.removeChild(this.$el) this.$emit('close') } window.history.pushState(null, null, document.URL) } } } </script> <style scoped> .popContainer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: 0; z-index: 50000; Background: RGBA (0, 0, 0, 0.9); } .close-icon { position: fixed; top: 10%; right: 10%; z-index: 50001; } .top-info { width: 100%; flex: 1; } .bottom-info { width: 100%; background: black; color: #AFAFAF; height: 12%; font-size: 14px; font-family: PingFang SC; font-weight: 400; } </style>Copy the code