npm地址:https://www.npmjs.com/package/screenfull
使用方法
安装
npm install screenfull --save
在使用.vue文件中 引入
import screenfull from "screenfull"
在按钮方法中调用方法可以双向切换全屏与非全屏
screenfull.toggle()
还可以
检测全屏状态
screenfull.isFullscreen
测试浏览器是否支持全screenfull
screenfull.isEnabled
API
screenfull 插件常用方法:
.request(ele) 全屏
.exit() 退出全屏
.toggle() 切换全屏
.on(event, function) : event为 ‘change’ | ‘error’ 注册事件
.off(event, function) : 移除前面已经注册的事件
.element: 返回一个全屏的dom节点,如果没有就为 null
.isFullscreen : 是否是全屏状态
.isEnabled : 判断是否支持全屏
页面里面具体使用
<template>
<el-button @click="toggleFullscreen">全屏</el-button>
</template>
<script lang="ts">
import screenfull from 'screenfull'
export default {
name: 'Home',
setup() {
function toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle()
}
}
return {
toggleFullscreen
}
}
}
</script>