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主页面内容全屏

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)// 监听按键事件
  },
  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
        //触发全屏的按钮
        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>

标签