关于全屏显示，浏览器全屏、窗口/页面全屏

1.浏览器全屏

（1）全屏显示

var docElm = document.documentElement;
//W3C  
if (docElm.requestFullscreen) {  
     docElm.requestFullscreen();  
}
//FireFox  
else if (docElm.mozRequestFullScreen) {  
     docElm.mozRequestFullScreen();  
}
//Chrome等  
else if (docElm.webkitRequestFullScreen) {  
     docElm.webkitRequestFullScreen();  
}
//IE 11
else if (elem.msRequestFullscreen) {
   elem.msRequestFullscreen();
}

（2）退出全屏

if (document.exitFullscreen) {  
     document.exitFullscreen();  
}  
else if (document.mozCancelFullScreen) {  
     document.mozCancelFullScreen();  
}  
else if (document.webkitCancelFullScreen) {  
     document.webkitCancelFullScreen();  
}
else if (document.msExitFullscreen) {
       document.msExitFullscreen();
}

2.窗口全屏、页面全屏

（1）定义控制子组件和整个屏幕的显示状态

// 全屏显示的状态--在data中定义
fullscreenstatus: {
    trend: false,
    seller: false,
    three: false,
    rank: false,
    hot: false,
    stock: false,
    allscreen:false//整个屏幕
}

（2）设置全屏样式

/*全屏的样式*/
.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 100;
}

（3）调用全屏方法

changeSize(val) {
    //改变页面全屏状态
    this.fullscreenstatus[val] = !this.fullscreenstatus[val];
    //当页面尺寸改变时，改变子组件屏幕尺寸--必须使用this.$nextTick(() => {}
    //this.$nextTick将回调函数中的操作放到下一次DOM更新之后执行，防止立即执行，结果出错
    this.$nextTick(() => {
        //两种父组件调用子组件的方法都可以使用
        if (val === 'three') {
            this.$refs.three.$emit("screenAdapter")
        } else {
            this.$refs[val].screenAdapter()
        }
    })
},