screenfull 全屏插件

212 阅读1分钟

screenfull 全屏插件

安装插件

pnpm install screenfull

首先引入需要的模块,其中有一个 API screenfull.isEnabled,用于判断当前是否支持全屏,true 为支持,screenfull.on 添加一个 change 监听方法,当全屏状态发生变化,执行自定义的 change 函数。

// 引入需要的模块和组件
import screenfull from 'screenfull'

// 创建一个 ref 变量来表示全屏状态
const isFullscreen = ref(false)

if (screenfull.isEnabled) {
    screenfull.on('change', change)
}

// 切换全屏状态
screenfull.toggle()