vue 全屏 screenfull

34 阅读1分钟

安装 screenfull

npm install screenfull@4.2.1 -S

最新的包会报错,推荐4.2.1

使用

  // 是否允许进入全屏
  if (screenfull.enabled) {
    const element = document.querySelector(".xxx");
    screenfull.toggle(element);
    
    screenfull.onchange(() => {
      console.log(screenfull.isFullscreen); // 判断是否是全屏
    });
  } else {
     // 提示浏览器不支持
  }

screenfull.on('change', change) // 监听全屏切换事件

screenfull.off('change', change) // 移除注册的事件

原生判断是否是全屏

document.addEventListener("fullscreenchange", () => {
    if (screenfull.element) {
      console.log("全屏");
    } else {
      console.log("不是全屏");
    }
});

完结