[vue] screenfull实现局部全屏

最新推荐文章于 2024-11-11 23:32:58 发布

533_

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量115

点赞数

分类专栏： # vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_14993591/article/details/130552274

版权

vue 专栏收录该内容

169 篇文章 3 订阅

订阅专栏

文章介绍了如何利用npm安装的screenfull库来实现全屏功能。在HTML中，给需要全屏的元素设置ref属性，然后在JavaScript中导入screenfull模块，调用toggle方法并传入ref属性值以切换全屏。如果浏览器不支持全屏，会显示不支持的警告信息。

摘要由CSDN通过智能技术生成

npm install  screenfull@5.1.0

给想全屏的元素设定ref属性

  <div ref="box" class="big-box"  @click="isScreenFull">
    首页
 
  </div>

//引入全屏插件
import screenfull from "screenfull";

//全屏方法
 isScreenFull() {
   if (!screenfull.isEnabled) {
     // 如果不支持进入全屏，发出不支持提示
     this.$message({
       message: "您的浏览器版本过低不支持全屏显示！",
       type: "warning",
     });
     return false;
   }
//此处填入需要全屏的ref属性值即可
   screenfull.toggle(this.$refs.box);
 },