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>