useFullscreen 设置全屏效果

GitHub代码地址：GitHub - seapack-hub/seapack-template: seapack-template框架

一，VueUse插件

（一）官网

VueUse

（二）安装

npm i @vueuse/core

二，使用

实现全屏效果，主要是通过插件中useFullscreen函数实现的。

（一）useFullscreen API

响应式Fullscreen API。它添加了以全屏模式呈现特定元素（及其后代）的方法，并在不再需要时退出全屏模式。这使得可以使用用户的整个屏幕呈现所需的内容（例如在线游戏），从屏幕上隐藏所有的浏览器用户界面以及其他应用，直到关闭全屏模式。

官网：https://www.vueusejs.com/core/useFullscreen/

大部分VueUse的函数都返回一个refs对象，可以使用ES6的对象解构语法来获取返回值。

import { useFullscreen } from '@vueuse/core'

const { isFullscreen, enter, exit, toggle } = useFullscreen()

useFullscreen函数提供了四个返回值，包括一个响应式变量和三个函数。

1. isFullscreen：响应式变量，Boolean类型，显示是否全屏展示
2. enter：进入全屏函数
3. exit：退出全屏函数
4. toggle：复核函数，第一次点击进入全屏，再次点击退出全屏，循环往复

（二）获取图标

在阿里矢量图标库图中获取对应的图标，下载svg文件。
地址：iconfont-阿里巴巴矢量图标库

将图标文件放到项目对应的位置。

（三）使用svg展示图标

<template>
  <div class="nav-right">
    <!--导航栏设置-->
    <div class="setting-navigation">
      <!--消息通知-->
      <SPIcon name="message-notify" size="20px"></SPIcon>
      <!--全屏设置-->
      <div class="setting-item" @click="toggle">
        <SPIcon :name="isFullscreen?'fullscreen-shrink':'fullscreen-expand'" size="20px"></SPIcon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useFullscreen} from '@vueuse/core';

/**
 * VueUse全屏
 */
const {isFullscreen,toggle} = useFullscreen()
</script>

<style scoped lang="scss">
.nav-right{
  display: flex;
  flex-direction: row;
  align-items: center;
  .setting-navigation{
    display: flex;
    gap: 10px;
  }
}
</style>

代码中 SPIcon是封装的svg组件，其代码如下：

<template>
  <svg aria-hidden="true" class="svg-icon" :style="{height:size,width:size}">
    <use :xlink:href="symbolId" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
import {computed} from 'vue'
const props = defineProps({
  //图标大小
  size:{
    type:[Number,String],
    default: '16px'
  },
  //图标颜色
  color:{
    type:String,
    default:"#606266"
  },
  //图标前缀，默认icon
  prefix:{
    type:String,
    default:'icon'
  },
  //图标名称
  name:{
    type:String,
    default:""
  }
});
const symbolId = computed(()=>`#${props.prefix}-${props.name}`);
</script>

<style scoped lang="scss">
</style>

具体封装过程可参考上一篇文章。

三，效果