全屏插件screenFull

1.安装

npm install screenfull@5.1.0

2、创建组件

<template>
  <div @click="handleFullScreen">
    <svg-icon :icon="icon ? 'exit-fullscreen' : 'fullscreen'"></svg-icon>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount } from 'vue'

// 引入全屏
import screenfull from 'screenfull'

// 全屏-非全屏切换函数
const handleFullScreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle()
  }
}
// 改变图标
const icon = ref(screenfull.isFullscreen)

const changeIcon = () => {
  icon.value = screenfull.isFullscreen
}
// 下面两个类似监听
onMounted(() => {
  screenfull.on('change', changeIcon)
})

onBeforeMount(() => {
  screenfull.off('change')
})
</script>
<style scoped></style>

3.使用到自己需要的位置，（只需要修改显示的图标）

  <svg-icon :icon="icon ? 'exit-fullscreen' : 'fullscreen'"></svg-icon>