切换全屏状态

像我这样优秀的人~

于 2024-05-10 10:26:04 发布

阅读量76

点赞数 2

分类专栏：基础学习文章标签：前端 javascript html

本文链接：https://blog.csdn.net/vdjskshvd/article/details/138654344

版权

基础学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

      <div @click="toggleFullScreen">
        <svg-icon
          :icon-class="isFullScreen ? 'quxiaoquanping' : 'quanping'"
          color="#c1c1c1"
        ></svg-icon>
      </div>


<script>
export default {
  data() {
    return {
      isFullScreen: false,
    };
  },
  methods: {
    // 切换全屏状态
    toggleFullScreen() {
      this.isFullScreen = !this.isFullScreen;
      const element = document.documentElement;

      if (!document.fullscreenElement) {
        // 如果当前不是全屏状态，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      } else {
        // 如果当前是全屏状态，退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    },
  },
};
</script>