vue3浏览器全屏以及某元素全屏设置

当页面中某块内容需要全屏展示时，提取公共代码到@/hooks/useScreenFull.ts,同时配合vuex存储控制页面元素的展示和隐藏；

import screenfull from 'screenfull';
import { ref, nextTick, watch } from 'vue';
import { useStore } from '../modules/portal/store/base';
/**
 * @description: 全屏hook
 * @param {string} ele - document选择器，不传为body
 * @return {*} isFull - 是否全屏状态；fullScreen - 全屏方法
 */
export default function useScreenFull(ele = 'body') {
  const isFull = ref(false);
  const store = useStore();

  const fullScreen = () => {
    nextTick(() => {
      if (screenfull.isEnabled && !isFull.value) {
        screenfull.request(document.querySelector(ele) as Element);
      } else {
        screenfull.toggle();
      }
    });
  };
  window.addEventListener('resize', () => {
    isFull.value = (window as any).fullscreen || (document as any).webkitIsFullScreen;
  });
  // 监听屏幕的全屏，关闭全屏
  document.addEventListener('fullscreenchange', function (event) {
    if (document.fullscreenElement) {
      isFull.value = true;
    } else {
      isFull.value = false;
    }
  });
  watch(
    () => isFull.value,
    () => {
    // vuex 改变全屏状态
      store.commit('screenFullState$$', isFull.value);
    }
  );

  return {
    isFull,
    fullScreen,
  };
}

页面使用如下

//引入方法
import useScreenFull from '@/hooks/useScreenFull';
// 全屏
const { isFull, fullScreen } = useScreenFull();

// dom
 <el-button link @click="fullScreen"
        ><span
          class="pdp_iconfont pms-margin-right--mi"
          :class="isFull ? 'icon-exit' : 'icon-full'"
        ></span
        >{{ isFull ? '取消全屏' : '全屏' }}</el-button
      >

vuex里store/base.js

import { createStore, useStore as baseUseStore, Store } from 'vuex';
export const BASE = {
  SCREEN_FULL_STATE: 'screenFullState$$', // 是否全屏
};

export interface Base {
  screenFullState: boolean;
}
const base = createStore({
  state() {
    return {
      screenFullState: false,
    };
  },
  getters: {
    [BASE.SCREEN_FULL_STATE](state: Base) {
      return state.screenFullState;
    },
  },
  mutations: {
    [BASE.SCREEN_FULL_STATE](state, payload) {
      state.screenFullState = payload;
    },
  },
});

export default base;

同时设置需要全屏的元素的height: 100%；以及需要隐藏的内容的样式height: 0px;