全屏按钮实现，某个块元素全屏展示，全屏按钮图标监听，监听全屏事件，全屏dom里面el-select选项不显示解决

前言：有些时候遇到bug与其把事情想得复杂，还不如回去看看官方文档。

做系统难免会遇到要做到全屏查看的需求，以下即为全屏代码的实现。 

<template>

<div>

<div>测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏</div><button type="button" @click="btnFull">全屏</button>

<div id="full">

I am full screen content;

</div>

</div>

</template>



<script>

export default {

name: "",

data() {

return {

fullscreen:false

};

},

methods: {

// 全屏事件

handleFullScreen() {

let element = document.getElementById("full");//放大的元素，如果整个系统放大，直接赋值 document.documentElement

if (this.fullscreen) {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

} else {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.webkitRequestFullScreen) {

element.webkitRequestFullScreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.msRequestFullscreen) {

// IE11

element.msRequestFullscreen();

}

}

this.fullscreen = !this.fullscreen;

},

btnFull(){

this.fullscreen = false;

this.handleFullScreen();

}

}

};

</script>



<style scoped>

#full{

height:400px;

width:100%;

background:red;

color:#fff;

}

</style>

有时候可能会加入一个放大缩小图片，通过点击全屏图标显示全屏，此时图标变为退出全屏，当手动按ESC或者点击浏览器自带的退出全屏按钮时候，图标不会相应的改变，因此需要监听窗口是否全屏，通过加入resize事件，如下：

    window.addEventListener("resize", function() {
      var isFull = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
      if (isFull === undefined) {isFull = false;}
      if(isFull){this.fullscreen=true;}else{this.fullscreen=false;}
      return isFull;
    });

图标代码如下

<i :class="fullscreen?'iconfont icon-full':'iconfont icon-mini'" @click="fullscreen"></i>

当一切都完美搞定时候，当你dom里面包含了el-select元素，放大后会发现select下拉项居然没显示出来，但是查看控制台发现dom元素实际上还是存在的，偶就遇到了这个问题，还卡了一个加班夜晚。不出现原因：这页面里是将full内的元素全屏化，mask与dropdown都是append在body的最下面，并没有包含在full内部，所以显示不出来。解决方法：将el-select属性popper-append-to-body设置为false,即：

 <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
    <el-option>.....
    </el-option>
  </el-select>

解决方法来源于github上大神的点醒https://github.com/ElemeFE/element/issues/12872

附加：如上述不满足需求，需监听F11，Esc按键,参考大神链接https://www.cnblogs.com/scot/p/5552051.html