Vue設置頁面全屏實例代碼

更新時間：2025年02月14日 09:43:05 作者：Monly21

文章介紹了如何在Vue中設置頁面全屏,包括下載插件、全屏、退出全屏、全屏切換等操作,同時,還分享了在若依框架中實現(xiàn)主頁面內(nèi)容全屏的方法,包括配置全局變量和在布局文件中進行設置

Vue設置頁面全屏

一、整個頁面的全屏

1.1 下載插件

npm install screenfull --save

1.3 全屏

screenfull.request();

1.4 退出全屏

screenfull.exit();

1.5 全屏切換

screenfull.toggle(); // 全屏切換

1.6 使用

import screenfull from "screenfull";
// 全屏
fullScreen() {
  if (screenfull.isEnabled && !screenfull.isFullscreen) {
    screenfull.request();
  }
},
// 退出全屏
exitFullScreen() {
  if (screenfull.isEnabled && screenfull.isFullscreen) {
    screenfull.exit();
  }
},
toggleFullScreen() {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
},

二、若依：app-main主頁面內(nèi)容全屏

2.1 在Axios中配置全局變量

const state = {
  ......
  navbar_tags: true // navbar/tags-view顯示與隱藏
}

const actions = {
  ......
  // navbar/tags-view顯示與隱藏
  setNavbar_tags({ commit }, navbar_tags) {
    state.navbar_tags = navbar_tags
  }
}

2.2 在頂部Banner配置是否顯示

在layout—index.vue文件中進行配置

computed: {
    ......
    navbar_tags: {
      get() {
        return this.$store.state.settings.navbar_tags
      }
    }
  },

2.3 如何使用

<el-button type="primary" plain size="small" @click="toggleFullScreen">{{ showName }}</el-button>

<script>
export default {
  mounted() {
    window.addEventListener("keydown", this.KeyDown, true)// 監(jiān)聽按鍵事件
  },
  watch: {
    'winfull.full'(value) {
	    this.showName = value?'退出全屏':'全屏展示'
	}
  },
  data() {
    return {
      showName: '全屏展示',
      // 窗口放大
      winfull: {
        full: false
      }
    }
  },
  methods:{
    // 禁用F11使用自己的全屏
    KeyDown (event) {
      if (event.keyCode === 122) {
        //禁用f11
        event.returnValue = false
        //觸發(fā)全屏的按鈕
        this.toggleFullScreen()
      }
    },
  	// 點擊全屏
    toggleFullScreen(){
		if (this.winfull.full) {
		  screenfull.toggle();
		  this.$store.dispatch('app/toggleSideBarHide', true);
		  this.$store.dispatch('settings/setNavbar_tags', false);
		} else {
		  screenfull.exit();
		  this.$store.dispatch('app/toggleSideBarHide', false);
		  this.$store.dispatch('settings/setNavbar_tags', true);
		}
	}
}
</script>