vue 使用 screenfull.js 页面全屏功能

 安装 screenfull

npm install --save screenfull

 在需要的页面引入

import screenfull from "screenfull";

主要实现方式 screenfull.toggle();

 screenfull.request() ：  点击事件只执行一次,全屏下点击事件不可用

 screenfull.toggle() ：  可以控制全屏与退出全屏两个显示

一、单页面全屏

created 跳转到给页面全屏显示；也可以弄一个按钮去触发全屏

created() {
    // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了
      if (!screenfull.isEnabled) {
        // 如果不允许进入全屏，发出不允许提示
        this.$message({
          message: "不支持全屏",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
}

 二、多页面全屏（应用到全部页面）

 通过使用全屏按钮，达到切换效果

可以在store中控制样式

html

// 需要的图标需要自己下载 iconfont

<el-tooltip
    class="item"
    effect="dark"
    content="全屏操作"
    placement="bottom"
    >
    <div @click="btnclick">
        <i
         v-if="!this.isFullScreen"
         class="iconfont icon-fangda"
         style="font-size:18px;"
        ></i>
        <i
         v-if="this.isFullScreen"
         class="iconfont icon-suoxiao"
         style="font-size:18px"
        ></i>
    </div>
</el-tooltip>

js

<script>
import screenfull from "screenfull";
export default {
    data() {
        return {}
    },
    computed:{
        isFullScreen(){
          return this.$store.state.isFullScreen
        }
    },
    methods:{
        btnclick(){
            // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了
            if (!screenfull.isEnabled) {
                // 如果不允许进入全屏，发出不允许提示
                this.$message({
                message: "不支持全屏",
                type: "warning"
                });
                return false;
            }
            screenfull.toggle();

            screenfull.on("change", () => {
                this.$store.dispatch("toggleFullScreen", screenfull.isFullscreen);
            });

        }
    }
  
}
</script>

store

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    isFullScreen: false
  },
  mutations: {
 
    toggleFullScreen(state, isFullScreen) {
      state.isFullScreen = isFullScreen;
    }
  },
  actions: {
 
    toggleFullScreen(context, isFullScreen) {
      context.commit('toggleFullScreen', isFullScreen)
    },
  },
  modules: {
  }
})


export default store