文章目录
- 页面全屏
- 页面全屏
- 完整代码
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>