vue全屏和退出全屏

最新推荐文章于 2024-09-02 15:50:40 发布

我是关小花

最新推荐文章于 2024-09-02 15:50:40 发布

阅读量468

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Gx0525_/article/details/113676235

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<template>
  <div>
    <div class="fullscreen-button" @click="toggleFullscreen" v-show="is">全屏</div>
    <div class="fullscreen-button" @click="toggleFullscreen" v-show="!is">退出全屏</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 设置flag用于判断是否进入全屏
      flag: 0,
      is:true
    };
  },
  methods: {
    // 点击按钮触发的方法
    toggleFullscreen() {
      this.is=!this.is
      console.log(this.is)
      this.flag++;
      this.flag % 2 == 0
        ? this.outFullCreeen(document)
        : this.FullCreeen(document.documentElement);
    },
    // 进入全屏的方法
    FullCreeen(element) {
      let el = element;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen;
      // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。
      // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，
      // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    //退出全屏的方法
    outFullCreeen(element) {
      let el = element;
      let cfs =
        el.cancelFullScreen ||
        el.webkitCancelFullScreen ||
        el.mozCancelFullScreen ||
        el.exitFullScreen;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
  },
};
</script>

我在代码中的使用

<template>
    <div class="resume">
        <div class="file" v-if="resume.length != 0">
              <div class="fileItem" v-for="(item, index) in resume" :key="index"》
                  <div>
                      <iframe :src="resume_urls[index]" class="resumeIframe" :id="'resumeIframe' + index"></iframe>
                      <div class="fileBtn">
                          <a :href="'/api/' + item.path" download="files" class="download">
                              下
                              <br />
                              载
                          </a>
                          <a class="preview" @click="fullScreen(index)">
                              全
                              <br />
                              屏
                          </a>
                      </div>
                  </div>
              </div>
          </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            resume_urls: [],
            resume: [],
        };
    },
    props: {},
    methods: {
        fullScreen(index) {
            let el = document.getElementById('resumeIframe' + index);
            let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
            if (typeof rfs != 'undefined' && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != 'undefined') {
                let wscript = new ActiveXObject('WScript.Shell');
                if (wscript != null) {
                    wscript.SendKeys('{F11}');
                }
            }
        },
    },
};
</script>

<style scoped lang="scss">
.resume {
    .file {
        .fileItem {
            margin-top: 20px;
            position: relative;
            .fileBtn {
                position: absolute;
                top: 1px;
                right: -16px;
                display: flex;
                flex-direction: column;
            }
            .download {
                padding: 10px 5px;
                height: auto;
                box-sizing: border-box;
                background: #0099cc;
                color: #fff;
                cursor: pointer;
                margin-bottom: 15px;
            }
            .preview {
                padding: 10px 5px;
                height: auto;
                box-sizing: border-box;
                background: #ff6c60;
                color: #fff;
                cursor: pointer;
                margin-bottom: 15px;
            }
        }
    }
}
.resumeIframe {
    width: 99%;
    height: 500px;
    border: 1px solid #eee;
}
</style>