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>