JS实现页面指定区域全屏阅读功能
更新时间：2024年06月05日 11:45:59 作者：发呆小天才yy
这篇文章主要介绍了JS实现页面指定区域全屏阅读功能,实现流程大概是需要在项目中安装vueuse及需要用到的页面中引入useFullScreen,本文给大家介绍的非常详细,需要的朋友可以参考下
这里用到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指定区域全屏阅读内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近因为工作需要，要深入的学习JavaScript，发现如果囫囵吞枣印象就是不深刻，自己去练习一下才能慢慢有点感觉。本文主要是详解堆的javascript实现方法，另外堆排序对我们来说太耳熟而又少用的情况下，本文当作一次复习。感兴趣的朋友们下面来一起看看吧。2016-11-11
这篇文章主要介绍了webpack踩坑之路图片的路径与打包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要为大家详细介绍了微信小程序slider组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了JS跨域之window.name实现的跨域数据传输,需要的朋友可以参考下2022-01-01
从无忧转过来的数组的扩展 ，非常不错的把javascript数组的扩展2008-07-07
这篇文章主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了ES6数组的扩展,结合实例形式详细对比分析了ES6数组的新增方法与相关使用技巧,需要的朋友可以参考下2017-04-04
这篇文章介绍了验证手机号码的JS方法，有需要的朋友可以参考一下2013-09-09
做音乐播放器小程序时,因为swiper的问题耽误不少时间,所以下面这篇文章主要给大家介绍了关于uni-app使用swiper实现轮播图的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了JavaScript实现的简单Tab点击切换功能,涉及JavaScript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-07-07
最新评论