vue实现窗口全屏效果（F11效果）

npm i screenfull

// 封装组件

components/Screenfull/index.js

<template>
  <div>
    <!--    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />-->
    <img
      v-show="isFullscreen"
      class="fullscreenBox"
      width="24px"
      height="24px"
      src="/img/fullscreen.png"
      @click="click"
    />
    <img
      v-show="!isFullscreen"
      class="fullscreenBox"
      width="24px"
      height="24px"
      src="/img/exit-fullscreen.png"
      @click="click"
    />
  </div>
</template>
 
<script>
import screenfull from "screenfull";
 
export default {
  name: "Screenfull",
  data() {
    return {
      isFullscreen: false,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.destroy();
  },
  methods: {
    click() {
      if (!screenfull.isEnabled) {
        this.$message({ message: "你的浏览器不支持全屏", type: "warning" });
        return false;
      }
      screenfull.toggle();
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen;
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on("change", this.change);
      }
    },
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off("change", this.change);
      }
    },
  },
};
</script>
 
<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
.fullscreenBox {
}
</style>

// 使用

<div class="right-menu-item hover-effect">
        <screenfull id="screenfull" />
</div>
 
import Screenfull from "@/components/Screenfull";
 
  components: {
    Screenfull,
  },

转自：
https://blog.csdn.net/m0_74149462/article/details/130639201