Vue3 第十九篇：JSX全屏切换

1.安装

npm install screenfull --save

2.引入

import screenfull from 'screenfull'

3.API：

.request(ele) 全屏
.exit() 退出全屏
.toggle() 切换全屏
.on(event, function) ： event为 ‘change’ | ‘error’ 注册事件
.off(event, function) ： 移除前面已经注册的事件
.element： 返回一个全屏的dom节点，如果没有就为 null
.isFullscreen : 是否是全屏状态
.isEnabled ： 判断是否支持全屏

4.使用（全屏切换按钮）

// 全屏相关
import screenfull from 'screenfull'

let isFullscreen = ref(screenfull.isFullscreen)
const toggle = () => {
    screenfull.toggle()
    // 触发双向绑定
    isFullscreen.value = screenfull.isFullscreen
}
const AboutFullScreen = () => {
    return (
        <>
            <el-button onClick={toggle}>{isFullscreen.value ? '退出全屏' : '进入全屏'}</el-button>
        </>
    )
}