vue專案 專案分為頂部導航、側邊導航、以及右邊mainContent區域

需求是 讓專案的其中一個頁面有全屏功能 並且在全屏時隱藏掉頂部的頂導航欄

實現：

1.在state裡 定義一個全域性flag 根據這個flag來控制頂導航的顯示與隱藏

定義在了usr module裡 在store裡引入就可以了

2.在頁面上的操作

頂導航頁面：

<el-header class="header" :style="{'display': (this.$store.state.user.screenFlag ? 'block': 'none')}">

通過定義的全域性標誌位控制頂導航是否顯示
子頁面裡：
<i class="el-icon-rank" @click="getFullScreen">

子頁面裡操作：

1. getFullScreen(){
2. //點選操作是否全屏時 對標誌位取反
3. this.$store.commit('SET_NUM', !(this.$store.state.user.screenFlag));
4. this.$store.state.user.screenFlag ?
5. this.outFullCreeen(document):this.inFullCreeen(document.documentElement)
6. },
7. inFullCreeen(element){
8. let el = element;
9. let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
10. el.mozRequestFullScreen || el.msRequestFullscreen;
11. // ie下是msRequestFullscreen --- 要注意大小寫啊。。
12. if (typeof rfs != "undefined" && rfs) {
13. rfs.call(el);
14. } else if (typeof window.ActiveXObject != "undefined") {
15. let wscript = new ActiveXObject("WScript.Shell");
16. if (wscript != null) {
17. wscript.SendKeys("{F11}");
18. }
19. }
20. },
21. outFullCreeen(element){
22. let el = element;
23. let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
24. el.mozCancelFullScreen || el.exitFullScreen || el.msExitFullscreen;
25. if (typeof cfs != "undefined" && cfs) {
26. cfs.call(el);
27. } else if (typeof window.ActiveXObject != "undefined") {
28. let wscript = new ActiveXObject("WScript.Shell");
29. if (wscript != null) {
30. wscript.SendKeys("{F11}");
31. }
32. }
33. }

到這裡就可以實現通過點選控制瀏覽器是否全屏了

問題是全屏時按鍵esc 退出全屏 導航欄不出現

瀏覽器在全屏時 監測不到esc按鍵的鍵盤事件！

解決方法一：

1. created(){
2. let that = this;
3. //webkitfullscreenchange 是h5瀏覽器監控瀏覽器是否全屏的api
4. //webkitfullscreenchange -- 谷歌 需考慮其他瀏覽器核心
5. document.addEventListener('webkitfullscreenchange', function(e){
6. //e.currentTarget.webkitIsFullScreen 可以判斷瀏覽器是否全屏
7. if(!(e.currentTarget.webkitIsFullScreen)){
8. //瀏覽器退出全屏時 將標誌位置為true來顯示頂部導航
9. that.$store.commit('SET_NUM', true);
10. }else{
12. }
13. });
14. document.addEventListener('fullscreenchange', function(e){
15. if(!(e.currentTarget.isFullScreen)){
16. that.$store.commit('SET_NUM', true);
17. }else{
19. }
20. });
21. /!* 火狐 *!/
22. document.addEventListener('mozfullscreenchange', function(e){
23. if(!(e.currentTarget.mozIsFullScreen)){
24. that.$store.commit('SET_NUM', true);
25. }else{
27. }
28. });
29. /!* IE *!/
30. document.addEventListener('MSFullscreenChange', function(e){
31. if(!(e.currentTarget.MSIsFullScreen)){
32. that.$store.commit('SET_NUM', true);
33. }else{
35. }
36. });
37. },

剛開始是通過定義全域性點選是否全屏按鈕的次數 判斷對2取餘 來全屏或退出

esc按鍵時 這個數加亂了 很錯亂

另外監測瀏覽器是否全屏的方法從網上找的

checkFull() return isFull 那個在我這不管用

解決方法二：

剛知道全屏時樣式有偽類。。

那麼問題就更簡單了 只需要全屏的時候 讓導航欄display:none就可以了

也不用設定全域性變數來關聯header的行內樣式了

只需要在主佈局檔案里加上如下樣式：

:-webkit-full-screen .header {
  display: none!important;
}
:-moz-full-screen .header {
  display: none!important;
}
:-ms-fullscreen .header {
  display: none!important;
}
:fullscreen .header {
  display: none!important;
}

樣式參考連結：

全屏時的偽類等等

https://blog.csdn.net/ligaoming_123/article/details/80605748