js按钮点击实现页面全屏

最新推荐文章于 2024-04-10 21:42:57 发布

前端小土狗

最新推荐文章于 2024-04-10 21:42:57 发布

阅读量538

点赞数 9

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_37110714/article/details/136690892

版权

<template>
  <el-button class="full-screen-but" @click="isFullScreen?exitScreen():fullScreen()">
    <i class="el-icon-full-screen"></i>
  </el-button>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isFullScreen: false
    };
  },
  methods: {
    fullScreen() {
      var el = document.documentElement;
      var rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
      if (typeof rfs != "undefined" && rfs && this.isFullScreen === false) {
        rfs.call(el);
        this.isFullScreen = true;
      }
      return;
    },
    exitScreen() {
      var cfs =
        document.exitFullscreen ||
        document.mozCancelFullScreen ||
        document.webkitCancelFullScreen ||
        document.msExitFullscreen;
      if (typeof cfs != "undefined" && cfs && this.isFullScreen === true) {
        cfs.call(document);
        this.isFullScreen = false;
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.full-screen-but {
  position: absolute;
  bottom: 3px;
  background: #444;
  border-color: white;
  right: 10px;
  padding: 8px;
}
.el-icon-full-screen {
  color: white;
}
</style>