FullScreen

Full screen component

TIP

Please pay attention to z-index when elements are not displayed as expected.

Basic Usage

WARNING

We need to set background color, otherwise there will be large black areas.

Pass el attribute with value of HTMLElement or function type, indicating the element that needs to be full screen, default is body.

<script lang="ts" setup>
const getElement = () => {
  return document.getElementsByClassName('my-water-mark')[0]
}
</script>

<template>
  <z-full-screen :el="getElement">
    <el-button>Enter full screen</el-button>
  </z-full-screen>
  <z-watermark content="Watermark component" class="my-water-mark bg-white">
    <div class="h-500px" />
  </z-watermark>
</template>

Slots

You can use enter and exit slots to customize the entry and exit points when entering and exiting

<script lang="ts" setup>
import { ref } from 'vue'

const isFullScreen = ref(false)

const handleChange = (val) => {
  isFullScreen.value = val
}

const getElement = () => {
  return document.getElementsByClassName('my-water-mark')[1]
}
</script>

<template>
  <div class="my-water-mark bg-white">
    <z-full-screen :el="getElement" @change="handleChange">
      <template #enter>
        <el-button class="z-100">
          Enter full screen
        </el-button>
      </template>
      <template #exit>
        <el-button>
          Exit full screen
        </el-button>
      </template>
    </z-full-screen>
    <z-watermark content="Watermark component">
      <div class="h-500px" />
    </z-watermark>
  </div>
</template>

z-full-screen Attributes

Attribute	Description	Type	Default
el	Element that needs to be full screen	HTMLElement / () => HTMLElement	'body'
renderEnter	Custom entry	() => VNode	''
renderExit	Custom exit	() => VNode	''

z-full-screen Slots

Slot Name	Description
—	FullScreen content
enter	Entry
exit	Exit

z-full-screen Events

Event Name	Description	Type
change	Callback when entering and exiting	(isFullScreen: boolean) => void