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

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

2、index.php/tags-602.html" >使用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;  /* 下部元素的样式 */}