网站正在建设中手机版青岛网络有限公司

1.下载插件
建议下载指定版本5.1.0，不然可能有一个报错

npm install --save screenfull@5.1.0

2.页面引入

import screenfull from "screenfull"

页面全屏

3.在标签上绑定点击事件

<div @click="handleFull">全屏/退出全屏</div>

4.在methods中写方法代码

handleFull() {if (screenfull.isEnabled) {// 加个判断浏览器是否支持全屏screenfull.toggle(); // 切换全屏状态} else {console.log("您的浏览器不支持全屏");}
}

页面全屏

5.在标签上绑定点击事件

<div id="demo" @click="container">指定元素全屏</div>

6.在methods中写方法代码

container() {const element = document.getElementById("demo"); // 指定全屏元素if (screenfull.isEnabled) {screenfull.request(element);this.elementFull = !this.elementFull; // 判断状态 决定是全屏还是退出全屏if (this.elementFull) {screenfull.toggle(); //全屏/退出全屏切换}}
}

完整代码

<template><div class="parentBox"><div @click="handleFull" class="btn">全屏/退出全屏</div><div id="demo" @click="container">指定元素全屏</div></div>
</template>
<script>
import screenfull from "screenfull";
export default {data() {return {elementFull: false,};},methods: {handleFull() {if (screenfull.isEnabled) {// 加个判断浏览器是否支持全屏screenfull.toggle(); // 切换全屏状态} else {console.log("您的浏览器不支持全屏");}},container() {const element = document.getElementById("demo"); // 指定全屏元素if (screenfull.isEnabled) {screenfull.request(element);this.elementFull = !this.elementFull; // 判断状态 决定是全屏还是退出全屏if (this.elementFull) {screenfull.toggle(); //全屏/退出全屏切换}}},},
};
</script>
<style scoped lang="scss">
.btn {background-color: gray;width: 200px;
}
#demo {background-color: aqua;width: 200px;height: 200px;
}
</style>