Vue3 全屏组件 源码

在Vue 3中，实现了全屏功能的组件，开箱即用。
注意：iPhone的Safari 不支持js触发全屏功能，所以这里面部分代码有根据条件screenfull.isEnabled跳过。建议触发全屏的按钮也根据条件screenfull.isEnabled显隐。

使用了screenfull依赖库，可以省去浏览器适配的麻烦。

代码如下：

<template>
  <div ref="myFullScreen" >
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { ModelRef, ref, watch } from "vue";
import screenfull from "screenfull";

const myFullScreen = ref();

const isFull: ModelRef<boolean> = defineModel<boolean>({ default: false });

// Esc退出 F11 退出等 会触发这个事件，要及时更新最新的状态
// 全屏前后样式上的调整，建议也在这里面填写
if (screenfull.isEnabled) {
  screenfull.on("change", () => {
    isFull.value = screenfull.isFullscreen;
    showFullBackground.value = isFull.value;
  });
}

const fullScreenChange = () => {
  if (!screenfull.isEnabled) {
    return;
  }
  if (isFull.value) {
    screenfull.request(myFullScreen.value);
  } else {
    screenfull.exit();
  }
};

watch(isFull, () => {
  fullScreenChange();
});
</script>

这个组件开放了一个v-model给引用的组件，使用方法如下：

<template>
  <MyFullScreen v-model="isFull">
   ...
   <el-icon @click="switchFullScreen" ><FullScreen /></el-icon>
  </MyFullScreen>
</template>

<script lang="ts" setup>
const isFull: Ref<boolean> = ref(false);
const switchFullScreen = () => {
  isFull.value = !isFull.value;
};

</script>

结束。