Vue 单页面/指定页面实现全屏 - screenfull(兼容浏览器) 隐藏顶部菜单和左侧菜单 - 附完整示例
JavaScript全屏API跨浏览器使用的简单包装器,允许您将页面或任何元素带入全屏。消除了浏览器实现的差异,所以您不必这么做。全屏前安装依赖包这是我的版本。
·
screenfull:JavaScript全屏API跨浏览器使用的简单包装器,允许您将页面或任何元素带入全屏。消除了浏览器实现的差异,所以您不必这么做。
目录
2、在data中声明变量,控制显示全屏还是退出全屏的icon
4、在mouted和unmouted中使用on 和off方法
效果
源码
一、准备工作
1、安装依赖包
npm install screenfull
2、示例版本
"screenfull": "^6.0.2",
二、使用步骤
1、单页面引入screenfull
import screenfull from "screenfull";
2、在data中声明变量,控制显示全屏还是退出全屏的icon
data() {
return {
isFullscreen: false,
};
},
3、在methods中写方法
methods: {
changeFullscreen() {
let fullDom = document.getElementById("fullDom");
if (fullDom) screenfull.toggle(fullDom);
},
change() {
this.isFullscreen = screenfull.isFullscreen;
},
},
4、在mouted和unmouted中使用on 和off方法
mounted() {
screenfull.on("change", this.change);
},
unmounted() {
screenfull.off("change", this.change);
},
三、完整示例
<template>
<div class="about" id="fullDom">
<div @click="changeFullscreen">
<a-icon
v-if="!isFullscreen"
type="fullscreen"
/>
<a-icon v-else type="fullscreen-exit" />
</div>
</div>
</template>
<script>
import screenfull from "screenfull";
export default {
data() {
return {
isFullscreen: false,
};
},
methods: {
changeFullscreen() {
let fullDom = document.getElementById("fullDom");
if (fullDom) screenfull.toggle(fullDom);
},
change() {
this.isFullscreen = screenfull.isFullscreen;
},
},
mounted() {
screenfull.on("change", this.change);
},
unmounted() {
screenfull.off("change", this.change);
},
};
</script>
<style scoped>
.about {
background-color: #fff;
}
</style>
tips:务必指定dom节点,更多方法请详见https://github.com/sindresorhus/screenfull
欢迎扫描下方二维码关注VX公众号
更多推荐
已为社区贡献8条内容
所有评论(0)