在 xx.vue 中给按钮增加全屏、缩放（退出全屏）功能

（也可以写一个 lib 通用函数，将变量与函数都封装进入，然后在合适的地方调用，全屏事件监听放在什么位置暂时没有想清楚（主要是不同页面切换该如何管理这个监听事件））

src\store\index.js （vuex）

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    // 全屏变量，标识当前是否为全屏状态
    fullscreen: false,
    element: document.documentElement
  mutations: {
    // 改变全屏状态变量
    changeFullscreenVar(state) {
      state.fullscreen = !state.fullscreen
    // 进入全屏
    lanchFullscreen(state) {
      var element = state.element
      if(element.requestFullscreen) {
        element.requestFullscreen()
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen()
    // 退出全屏
    exitFullscreen(state) {
      if(document.exitFullscreen) {
        document.exitFullscreen()
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if(document.msExitFullscreen) {
        document.msExiFullscreen()
      } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
    // 暴露给外界的处理方法，调用这个方法，自行判断是要全屏还是退出全屏
    handleFullScreen(state) {
      // 注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
      var fullscreenEle = fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
      console.log(fullscreenEle, '全屏元素...')
      if(fullscreenEle) {
        console.log('exitFullscreen..')
        this.commit('exitFullscreen')
      } else {
        console.log('lanchFullscreen..')
        this.commit('lanchFullscreen')
  actions: {
  modules: {
src\App.vue
<template>
    <router-view />
</template>
<script>
export default {
  name: 'App',
  components: {
  mounted() {
    window.addEventListener('keydown', this.myKeyEvent)
    if(document.exitFullscreen) {
      document.addEventListener('fullscreenchange', this.changeFullscreenVar)
    } else if(document.mozCancelFullScreen) {
      document.addEventListener('mozfullscreenchange', this.changeFullscreenVar)
    } else if(document.msExitFullscreen) {
      document.addEventListener('MSFullscreenChange', this.changeFullscreenVar)
    } else if(document.webkitCancelFullScreen) {
      document.addEventListener('webkitfullscreenchange', this.changeFullscreenVar)
  methods: {
    myKeyEvent(e) {
      let key = e.keyCode
      if (key === 122) {
        console.log('F11')
        // 阻止默认的键盘事件
        event.returnValue = false
        this.$store.commit('handleFullScreen')
    changeFullscreenVar(){
      this.$store.commit('changeFullscreenVar')
    fullScreenChange(event) {
      console.log(event, 'fullScreenChange event')
      // 判断一下变量是不是全屏，是全屏则代表 F11、ESC 退出了全屏，需要变量更正过来
      if(this.$store.state.btnFullScreen && this.$store.state.fullscreen) {
        this.$store.commit('changeFullScreenVariable')
  beforeDestroy() {
    window.removeEventListener('keydown', this.myKeyEvent)
    if(document.exitFullscreen) {
      document.removeEventListener('fullscreenchange', this.changeFullscreenVar)
    } else if(document.mozCancelFullScreen) {
      document.removeEventListener('mozfullscreenchange', this.changeFullscreenVar)
    } else if(document.msExitFullscreen) {
      document.removeEventListener('MSFullscreenChange', this.changeFullscreenVar)
    } else if(document.webkitCancelFullScreen) {
      document.removeEventListener('webkitfullscreenchange', this.changeFullscreenVar)
</script>
src\views\xx.vue
<template>
      <div v-if="!$store.state.fullscreen" class="btn cursorPointer" @click="clickTopBtn('handleFullScreen')">
        <img src="./../assets/images/quanping.png" alt="">
      <div v-else class="btn cursorPointer" @click="clickTopBtn('handleFullScreen')">
        <img src="./../assets/images/suofang.png" alt="">
</template>
<script>
export default {
  methods: {
    clickTopBtn(func) {
        this.$store.commit('handleFullScreen')
</script>
<style>
/*重在功能逻辑代码，样式自己写*/
</style>
全屏css样式
/* 多浏览器兼容性写法（亲测有效） */
/* Chrome, Safari, Opera 写法 */
:-webkit-full-screen { }
/* Firefox 写法 */
:-moz-full-screen { }
/* IE/Edge 写法 */
:-ms-fullscreen { }
/* 标准写法 */
:fullscreen { }
/* 也可以通过区分全屏元素 css选择器、浏览器全屏样式 */
#fullscreenEle:fullscreen { }
在全屏状态需要改变样式的地方根据自己的项目写就好了
/* :fullscreen */
:fullscreen #centerInfo,
:fullscreen #rightContent{
  display: none;
:fullscreen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
:fullscreen #navMenu{
  width: unset;
  border-radius: 8px;
  left: 10px;
  top: 10px;
/* :-webkit-full-screen  */
:-webkit-full-screen #centerInfo,
:-webkit-full-screen #rightContent{
  display: none;
:-webkit-full-screen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
:-webkit-full-screen #navMenu{
  width: unset;
  border-radius: 8px;
  left: 10px;
  top: 10px;
/* :-moz-full-screen */
:-moz-full-screen #centerInfo,
:-moz-full-screen #rightContent{
  display: none;
:-moz-full-screen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
:-moz-full-screen #navMenu{
  width: unset;
  border-radius: 8px;
  left: 10px;
  top: 10px;
/* :-ms-fullscreen */
:-ms-fullscreen #centerInfo,
:-ms-fullscreen #rightContent{
  display: none;
:-ms-fullscreen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
:-ms-fullscreen #navMenu{
  /* IE 不能用 unset，案例中改成 auto 也行 */
  width: auto;
  border-radius: 8px;
  left: 10px;
  top: 10px;
能得出这套个人看似完美的方案，多亏了这篇博客：HTML5 API详解（1）:fullscreen全屏模式
非常感谢~