I. Component introduction

El-overlay is a component used inside Element-Plus. The official documentation does not provide a description of this component.

This component is used to pop up an overlay and is used in components such as el-Dialog and el-Messagebox.

Second, source code analysis

export default defineComponent({
  name: 'ElOverlay'.props: {
    // Whether to show the masking layer
    mask: {
      type: Boolean.default: true,},overlayClass: {
      type: [String.Array.Object],},// Specify the Index of the overlay
    zIndex: {
      type: Number,}},emits: ['click'].setup(props, { slots, emit }) {
    // Identifier, set to true when a mouse event is triggered over a pop-up mask
    let mousedownTarget = false
    let mouseupTarget = false

    // Click events in the sequence mousedown -> mouseup -> click
    // mask click the event
    const onMaskClick = (e: MouseEvent) = > {
      // Throw a click event when mouseDown and mouseup are both triggered on the mask element
      // to ensure that the click action is triggered on the Mask element
      // (e.target === e.currenttarget)
      if (mousedownTarget && mouseupTarget) {
        emit('click', e)
      }
      // Resets the identifier state
      mousedownTarget = mouseupTarget = false
    }

    // init here
    return () = > {
      return props.mask
        ? createVNode(
          // Display mask
          'div',
          {
            class: ['el-overlay', props.overlayClass],
            style: {
              zIndex: props.zIndex,
            },
            // Bind the click event
            onClick: onMaskClick,
            onMousedown: (e: MouseEvent) = > {
              // props. Mask can be removed
              if (props.mask) {
                // e.currenttarget refers to the element bound to the event
                // The identifier is set to true when the event trigger object is the current element
                mousedownTarget = e.target === e.currentTarget
              }
            },
            onMouseup: (e: MouseEvent) = > {
              if (props.mask) {
                / / same as above
                mouseupTarget = e.target === e.currentTarget
              }
            },
          },
          [renderSlot(slots, 'default')],
          PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS,
          ['onClick'.'onMouseup'.'onMousedown'],)// Do not display mask
        : h(
          'div',
          {
            class: props.overlayClass,
            style: {
              zIndex: props.zIndex,
              position: 'fixed'.top: '0px'.right: '0px'.bottom: '0px'.left: '0px',
            },
          },
          [renderSlot(slots, 'default')],)}},})Copy the code

Third, summary

  1. throughmaskProperty controls whether a mask layer is displayed.
  2. event.currentTargetRepresents the event-bound element that can be usedevent.target === event.currentTargetDetermines whether the event is triggered by the element that registers the event response function.
  3. The mouse click event response sequence is:mouseDown -> mouseUp-> click;
  4. Why not check in the click event hereevent.target === event.currentTargetWell, it’s throughMouseDown, mouseUpSet the flag bit in the event to do?