点击放大某个节点到全屏

<template>

  <div class="boardKbBox" id="fullDom">
    <button @click="toogle">全屏</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const fullscreenFlag = ref(false)
const toogle = () => {
  if (!fullscreenFlag.value) {
    //如果未全屏，则开启全屏
    fullscreenFlag.value = true
    //获取需要全屏的元素
    let full = document.getElementById('fullDom')
    //开启全屏方法
    toFullscreen(full)
    //分辨率调整后，重新初始化方法
    init();
  } else {
    //如果已全屏，则退出全屏
    fullscreenFlag.value = false
    //退出全屏方法
    cancelFullscreen()
    //分辨率调整后，重新初始化方法
    init();
  }
}
//全屏方法
const toFullscreen = (element) => {
  //全屏
  if (element.requestFullscreen) {
    element.requestFullscreen()
  }
  //兼容Firefox全屏
  else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  }
  //兼容Chrome Safari Opera全屏
  else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  }
  //兼容IE Edge全屏
  else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}
//退出全屏
const cancelFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}
</script>

<style lang="less" scoped>
.boardKbBox {
  background-color: #fff;
  height: calc(100vh - 125px);
  border: 1px solid red;
}
</style>

放大到全屏的方法

<template>
    <div class="bgImageBox" ref="fullscreenElement">
        <img class="fullVox" src="@/web/assets/dpzs/full.png" @click="toggleFullscreen" alt="">
    </div>
</template>

<script setup>
import { ref } from 'vue'

const fullscreenFlag = ref(false)
const fullscreenElement = ref(null) // 获取要全屏的DOM元素

const toggleFullscreen = () => {
    if (!fullscreenFlag.value) {
        // 进入全屏
        enterFullscreen()
    } else {
        // 退出全屏
        exitFullscreen()
    }
}

const enterFullscreen = () => {
    const element = fullscreenElement.value

    if (element.requestFullscreen) {
        element.requestFullscreen().then(() => {
            fullscreenFlag.value = true
        }).catch(err => {
            console.error('全屏错误:', err)
        })
    } else if (element.webkitRequestFullscreen) { /* Safari */
        element.webkitRequestFullscreen()
        fullscreenFlag.value = true
    } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen()
        fullscreenFlag.value = true
    }
}

const exitFullscreen = () => {
    if (document.exitFullscreen) {
        document.exitFullscreen().then(() => {
            fullscreenFlag.value = false
        })
    } else if (document.webkitExitFullscreen) { /* Safari */
        document.webkitExitFullscreen()
        fullscreenFlag.value = false
    } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen()
        fullscreenFlag.value = false
    }
}

// 监听全屏状态变化
document.addEventListener('fullscreenchange', handleFullscreenChange)
document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
document.addEventListener('msfullscreenchange', handleFullscreenChange)

function handleFullscreenChange() {
    fullscreenFlag.value = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
    )
}
</script>

<style lang="scss" scoped>
.bgImageBox {
    width: 100%;
    height: 100%;
    background: url('@/web/assets/dpzs/bgImg.jpg') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;

    /* 全屏模式下的样式 */
    &:fullscreen {
        background-size: 100% 100%;
    }

    /* 浏览器前缀 */
    &:-webkit-full-screen {
        background-size: 100% 100%;
    }

    &:-ms-fullscreen {
        background-size: 100% 100%;
    }

    .fullVox {
        position: absolute;
        top: 2vh;
        right: 2vw;
        height: 1vw;
        width: 1vw;
        cursor: pointer;
        z-index: 1000;
    }
}
</style>