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

fruge2023-10-03 17:15

文章目录

页面全屏
页面全屏
完整代码

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>