vue3-elementPlus 全屏小组件

1.创建fullScreen.vue

<template>
  <div class="com">
    <el-icon>
      <FullScreen @click="toggleFullScreen" />
    </el-icon>
  </div>
</template>

<script lang="ts" setup>
const emits = defineEmits(['update:modelValue'])
const props = defineProps(['modelValue'])

const { modelValue } = toRefs(props)

const toggleFullScreen = () => {
  emits('update:modelValue', !modelValue?.value)
}
</script>

<style lang="scss" scoped>
.com {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}
</style>

2.main全局引入样式

.fullscreen-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

3.组件中使用

<template>
	<!-- fullscreen-wrap为全屏内容区域 -->
	<el-card style="min-height: 500px" :class="{ 'fullscreen-wrap': isToggle }">
		<full-screen v-show="holdData.length > 0" v-model="isToggle" style="top: 50px" />
		<el-table
	        :max-height="maxHeight"
	        ...
	      >
      </el-table>
	</el-card>
</template>
<script setup lang="ts">
import fullScreen from '@/components/fullScreen/index.vue'
//table全屏按钮
const isToggle = ref<boolean>(false)
const maxHeight = ref<any>('404px')
//监听控制全局后指定区域的高度&&同理如全屏区域存在echarts等视图则可定义变量重新进行init加载
watch(
  () => isToggle.value,
  (e) => {
    if (e) {
      maxHeight.value = window.innerHeight - 105 + ''
    } else {
      maxHeight.value = '404'
    }
  }
)
</script>