vue3前端实现全屏显示，元素垂直填满页面

1、 toggleFullscreen方法实现选定元素全屏展示

2、使用flex属性+ flex-direction 实现垂直布局填满整个页面

全屏import { ref, onMounted, onUnmounted } from 'vue'import * as echarts from 'echarts'export default {name: 'App',setup() {const countData = ref([])onMounted(() => {initChart()// initChart1()})onUnmounted(() => {})const initChart = () => {var chartDom = document.getElementById('bbb')let myChart = echarts.getInstanceByDom(chartDom);if (myChart) {myChart.dispose();}myChart = echarts.init(chartDom);var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]}option && myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})}const initChart1 = () => {var chartDom = document.getElementById('ccc')let myChart = echarts.getInstanceByDom(chartDom);if (myChart) {myChart.dispose();}myChart = echarts.init(chartDom);var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]}option && myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})}const toggleFullscreen = () => {const element = document.getElementById('aaa')if (element) {if (document.fullscreenElement) {document.exitFullscreen();} else {element.requestFullscreen().catch(err => {console.log('无法进入全屏模式：', err)})}}}return {countData,toggleFullscreen}}}body {margin: 0;}/* 使用flex布局 */.container {display: flex;flex-direction: column;height: 100vh;/* 确保容器元素的高度与视口高度一致 */}/* 设置上部元素 */.header {border: 1px solid green;height: 100px;/* 上部元素的高度 */background-color: #ccc;/* 上部元素的样式 */}/* 设置下部元素 */.content {border: 1px solid yellow;flex-grow: 1;/* 下部元素占据父元素的剩余空间 */background-color: #eee;/* 下部元素的样式 */}