element-ui element-plus overlay - 分析

源代码地址 - overlay

version:element-plus 1.0.1-beta.0

<script lang="ts">
import { createVNode, defineComponent, renderSlot } from 'vue'
import { PatchFlags } from '@element-plus/utils/vnode'

export default defineComponent({
  name: 'ElOverlay',
  props: {
    // 是否需要遮罩
    mask: {
      type: Boolean,
      default: true,
    },
    overlayClass: {
      type: String,
    },
    zIndex: {
      type: Number,
    },
  },
  emits: ['click'],
  setup(props, { slots, emit }) {
    // mask 点击事件
    const onMaskClick = () => {
      emit('click')
    }
    // init here
    return () => {
      // 根据传入的mask 决定是否渲染遮罩层
      return props.mask
        ? createVNode(
          'div',
          {
            class: ['el-overlay', props.overlayClass],
            style: {
              zIndex: props.zIndex,
            },
            onClick: onMaskClick,
          },
          [renderSlot(slots, 'default')],
          PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS,
          ['onClick'],
        )
        : renderSlot(slots, 'default')
    }
  },
})
</script>