screenfull全屏、退出全屏、指定元素全屏的使用步骤

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

npm install --save [email protected]

2.页面引入

import screenfull from "screenfull"

页面全屏

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

全屏/退出全屏

4.在methods中写方法代码

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

页面全屏

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

指定元素全屏

6.在methods中写方法代码

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

完整代码