GitHub代码地址：GitHub - seapack-hub/seapack-template: seapack-template框架
一，VueUse插件
（一）官网
（二）安装
npm i @vueuse/core
二，使用
实现全屏效果，主要是通过插件中useFullscreen函数实现的。
（一）useFullscreen API
响应式Fullscreen API。它添加了以全屏模式呈现特定元素（及其后代）的方法，并在不再需要时退出全屏模式。这使得可以使用用户的整个屏幕呈现所需的内容（例如在线游戏），从屏幕上隐藏所有的浏览器用户界面以及其他应用，直到关闭全屏模式。
官网：www.vueusejs.com/core/useFul…
大部分VueUse的函数都返回一个refs对象，可以使用ES6的对象解构语法来获取返回值。
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()
useFullscreen函数提供了四个返回值，包括一个响应式变量和三个函数。
- isFullscreen：响应式变量，Boolean类型，显示是否全屏展示
- enter：进入全屏函数
- exit：退出全屏函数
- 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>
