1.安装全屏插件
npm install screenfull
2.页面引入使用
import screenfull from 'screenfull'
3.页面绑定事件
<el-button type="primary" @click="SetFullScreen">点我实现局部全屏 </el-button>
<el-button type="primary" @click="SetFullScreen2">点我实现全屏展示 </el-button>
//默认全屏
const SetFullScreen = () => {
console.log(screenfull.isEnabled);
//screenfull.isEnabled 此方法返回布尔值,判断当前能不能进入全屏
if (!screenfull.isEnabled) {
return false
}
//screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态,则退出全屏
screenfull.toggle()
}
//局部全屏
const SetFullScreen2 = () => {
//获取dom元素节点来实现指定元素全屏展示
let el = document.querySelector('.box')
//screenfull.isEnabled 此方法返回布尔值,判断当前能不能进入全屏
if (!screenfull.isEnabled) {
return false
}
//screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态,则退出全屏
screenfull.toggle(el)
}