vue3 browser full screen and full screen settings of certain elements

When a piece of content on the page needs to be displayed in full screen, extract the common code to @/hooks/useScreenFull.ts, and cooperate with vuex storage to control the display and hiding of page elements;

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,
  };
}

The page is used as follows

//引入方法
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
      >

vuexristore/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;

At the same time, set the height of the elements that need to be full screen: 100%; and the style height of the content that needs to be hidden: 0px;