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>
