vue项目实现局部全屏

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

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

2、引入screenfull插件（需要提前安装npm install --save-dev screenfull@5.1.0）

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

3、全屏方法

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

4、完整代码

<template >
  <div ref="box" class="big-box"  @click="isScreenFull">
    首页
  </div>
</template>
<script>
//引入全屏插件
import screenfull from "screenfull";
export default {
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.isScreenFull()
    });
  },
  methods: {
    //全屏方法11
    isScreenFull() {
      console.log(111);
      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle(this.$refs.box);
    },
  },
};
</script>
<style lang="scss" scoped>
.big-box{
  background: pink;
}
</style>

5、效果图