介绍
Vue3 实现全屏效果
# 全屏效果
- 浏览器
F11可以让其页面展示成全屏效果 也可以通过api 实现这个效果 - Element.requestFullscreen() (opens new window) 通过事件绑定 让指定元素进行全屏效果
- 备注： 这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。
- document.exitFullscreen() (opens new window) 取消全屏效果 注意: 此api不需要绑定元素Dom 直接操作
document即可 - document.fullscreenElement (opens new window) 查看是否存在全屏 通常配合取消全屏进行判断
# 实现代码
<template>
<div class="allBox" ref="viewBox">
<div class="Button">
<NButton type="info" size="small" @click="openView">{{text}}</NButton>
</div>
</div>
</template>
<style lang="scss" scoped>
</style>
<script setup>
// 导入Vue组合API
import { ref } from 'vue'
// 导入webgl 渲染方法
import getScene from './settings/main'
// 导入组件
import { NButton } from 'naive-ui'
// 获取需要全屏元素的Dom
const viewBox = ref(null)
// 绑定语数
const text = ref('全 屏')
// 全屏和退出全屏方法
const openView = () => {
// 获取当前是否存在全屏的元素
const fullscreen = document.fullscreenElement
// 如果存在全屏的元素 退出全屏
if (fullscreen) {
// 退出全屏
document.exitFullscreen()
// 修改语数
text.value = '全 屏'
} else {
// 给指定元素全屏(需要获取元素的Dom)
viewBox.value.requestFullscreen()
// 修改语数
text.value = '退 出'
}
}
</script>
<script>
export default {
name: 'MyName'
}
</script>