vue实现全屏模式可以通过第三方依赖screenfull完成效果。

实现效果：查看源码

首先需要安装第三方依赖

// npm 
npm install screenfull//yarn
yarn add screenfull// pnpm
pnpm install screenfull

代码实现：

<div class="flex-center w100 h100 font20 cursor-pointer" @click="handleClick">{{!isScreenfull?'显示全屏':"取消全屏"}}
</div><script setup>import {ref} from "vue";import screenfull from 'screenfull';const isScreenfull=ref(false);/* 点击 */const handleClick = () => {if (!screenfull.isEnabled) {ElMessage.warning('暂不不支持全屏');return false;}screenfull.toggle();isScreenfull.value=!isScreenfull.value}
</script>