Vue （第7篇教程点击实现全屏和退出全屏的功能）

最新推荐文章于 2024-08-19 20:43:02 发布

一只程序猿小白

最新推荐文章于 2024-08-19 20:43:02 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42540989/article/details/100884322

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

1、图标引入的是阿里图库。

 <i class="iconfont" :class="[btnStatus === 0?'iconquanping':'iconexit']" @click="getFullCreeen(btnStatus)"></i>

2、

export default {
  name: "mainContent",
  data() {
    return {
      n:0,
      btnStatus:0,
    };
  },
  watch: {
  },
  mounted() {
  },
  computed: {
  },
  
  methods: {
     getFullCreeen(btnStatus){
           console.log("22222222"+btnStatus)
            this.btnStatus = this.btnStatus === 0 ? 1 : 0;
            this.n++;
            this.n%2==0? 
            this.outFullCreeen(document):this.inFullCreeen(document.documentElement)
        },
        inFullCreeen(element){
            let el = element;
            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}");
                }
            }
        },
        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}");
                }
            }
        },
  
};

3、