VUE3中实现浏览器全屏功能

1.安装screenfull 

npm install screenfull

 

2.在vue页面中引入 

 import screenfull from 'screenfull'

 3.定义全屏方法

const SetFullScreen = () => {

    //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏

    if (!screenfull.isEnabled) {

        return false

    }

    //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏

    screenfull.toggle()

}

 4.调用方法

            <el-button type="primary" 

               @click="SetFullScreen">全屏</el-button>