1.效果举例：
点击tab栏进入全屏
按esc或者屏幕中间图标退出全屏，通过返回按钮返回项目
2.场景
相当于手动按F11的效果。经典的应用场景是制作可视化大屏或者全屏展示类的页面。因为现在写的是vue项目，所以稍后以vue为例子。
3.实现步骤
第一步，下载插件
npm install screenfull save
第二步，在你需要使用的页面中引入
1. //引入全屏插件 2. import screenfull from "screenfull";
第三步，复制下面的函数
methods: { //全屏方法 isScreenFull () { if (!screenfull.isEnabled) { // 如果不支持进入全屏，发出不支持提示 this.$message({ message: "您的浏览器版本过低不支持全屏显示！", type: "warning" }) return false } screenfull.toggle() } },
第四步，页面的结构里面找个位置粘贴以下代码
注意一个点，样式设置为绝对定位之类的，意思是别让他占位置影响布局。
<screenfull style="position: absolute; left: 0px; top: 0px; z-index: 9999999" id="screenfull" @click="isScreenFull" > <el-button style="display: none">全屏</el-button></screenfull >
第五步，生命周期中调用，达到一进入就自动全屏
created () { this.$nextTick(() => { this.isScreenFull() //以下两种方式二选一，均可 // setTimeout(() => { // document.querySelector("#screenfull").click() // }) }) },
至此，结束。
附上一个设置返回功能的写法，以供参考
<template> <div> <div id="app" v-if="!idBig"> <router-view v-if="isRouterAlive" /> </div> <div v-if="idBig"> <el-button @click="$router.go(-1) || $router.push('/employees')" >返回</el-button > <BigPing></BigPing> </div> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { idBig: false, isRouterAlive: true } }, created () { }, methods: { reload () { this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true }) }, }, watch: { $route (to, from) { if (to.name == 'Dashboard') { this.idBig = true } else { this.idBig = false } } }, } </script>
