我要评论这里用到vueuse中的usefullscreen（vueuse中提供了许多封装好的函数可以直接使用，极大提高了开发效率）
详见vueuse官方文档：
实现流程
首先需要在项目中安装vueuse
npm i @vueuse/core
在需要用到的页面中引入usefullscreen
import { usefullscreen } from '@vueuse/core'使用(这里用的vue3)
将需要全屏展示的元素用mainele标记，作为入参传入usefullscreen，获取全屏展示用到的数据
isfullscreen：布尔类型的值，用来判断当前是否是全屏状态
toggle：调用toggle函数实现全屏和非全屏的切换
const mainele = ref<htmlelement | null>(null);
const isfullscreentext = ref("全屏阅读");
const { isfullscreen, enter, exit, toggle } = usefullscreen(mainele);
const changefullscreen = () => {
toggle();
if (isfullscreen.value) {
isfullscreentext.value = "全屏阅读";
} else {
isfullscreentext.value = "退出全屏";
}
};完整代码
<template>
<div>
<h1 style="text-align: center;">全屏阅读测试</h1>
<div ref="mainele">
<el-button type="primary" @click="changefullscreen">{{
isfullscreentext
}}</el-button>
<div style="width: 100%; height: 90vh; background-color: antiquewhite">
内容内容内容内容内容
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { usefullscreen } from "@vueuse/core";
const mainele = ref<htmlelement | null>(null);
const isfullscreentext = ref("全屏阅读");
const { isfullscreen, enter, exit, toggle } = usefullscreen(mainele);
const changefullscreen = () => {
toggle();
if (isfullscreen.value) {
isfullscreentext.value = "全屏阅读";
} else {
isfullscreentext.value = "退出全屏";
}
};
</script>到此这篇关于js实现页面指定区域全屏阅读功能的文章就介绍到这了,更多相关js指定区域全屏阅读内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论