vue中实现简单全屏功能

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)
}