vue 实现全屏

码农中的小菜鸡

于 2023-02-20 16:23:29 发布

阅读量4k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/oldolder/article/details/129126485

版权

通过引用第三方库 screenfull 实现全屏

1.首先通过 npm install screenfull 执行下载
2.在使用页面进行import screenfull from “screenfull”; 引入
3.然后绑定事件，调用提供的方法进行全屏处理
<span @click="handleScreen">全屏</span>

handleScreen() {
		//screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
      if (!screenfull.isEnabled) {
        return false
      }
      //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
      screenfull.toggle()
    }