vuex搭配screenfull实现全屏

安装

npm install --save screenfull

简单使用

<template>
  <span @click='clickFullscreen'>全屏</span>
</template>
 
<script>
  import screenfull from 'screenfull'
  export default{
    name: 'screenfull',
    data(){
      return {
        isFullscreen: false
      }
    },
    methods:{
      clickFullscreen(){
        if (!screenfull.isEnabled) {
          this.$message({
            message: 'you browser can not work',
            type: 'warning'
          })
          return false
        }
        screenfull.toggle()
      }
    }
  }
</script>

搭配vuex使用

import screenfull from 'screenfull'
export default {
    namespaced: true,
    state: {
        // 全屏激活
        active: false
    },
    actions: {
        /**
         * @description 初始化监听
         */
        listen({ commit }) {
            return new Promise(resolve => {
                if (screenfull.enabled) {
                    screenfull.on('change', () => {
                        console.log('1')
                        if (!screenfull.isFullscreen) {
                            commit('set', false)
                        }
                    })
                }
                // end
                resolve()
            })
        },
        /**
         * @description 切换全屏
         */
        toggle({ commit }) {
            return new Promise(resolve => {
                if (screenfull.isFullscreen) {
                    screenfull.exit()
                    commit('set', false)
                } else {
                    screenfull.request()
                    commit('set', true)
                }
                // end
                resolve()
            })
        }
    },
    mutations: {
        /**
         * @description 设置 store 里的全屏状态
         * @param {Object} state vuex state
         * @param {Boolean} active active
         */
        set(state, active) {
            state.active = active
        }
    },
    getters: {
    }
}