feat(projects): 添加全屏显示

This commit is contained in:
Soybean 2021-09-08 09:58:01 +08:00
parent a0392b3d28
commit 0a1711d5b1
3 changed files with 12 additions and 7 deletions

View File

@ -1,3 +1,3 @@
import HeaderItemContainer from './HeaderItemContainer.vue'; import HeaderItem from './HeaderItem.vue';
export { HeaderItemContainer }; export { HeaderItem };

View File

@ -1,17 +1,22 @@
<template> <template>
<div class="global-header flex-y-center justify-between"> <div class="global-header flex-y-center justify-end">
<h2></h2> <header-item class="w-40px h-full" @click="toggle">
<header-item-container class="w-40px h-full" @click="openSettingDrawer"> <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
<icon-gridicons-fullscreen v-else class="text-16px" />
</header-item>
<header-item class="w-40px h-full" @click="openSettingDrawer">
<icon-mdi-light-cog class="text-16px" /> <icon-mdi-light-cog class="text-16px" />
</header-item-container> </header-item>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useFullscreen } from '@vueuse/core';
import { useAppStore } from '@/store'; import { useAppStore } from '@/store';
import { HeaderItemContainer } from './components'; import { HeaderItem } from './components';
const { openSettingDrawer } = useAppStore(); const { openSettingDrawer } = useAppStore();
const { isFullscreen, toggle } = useFullscreen();
</script> </script>
<style scoped> <style scoped>
.global-header { .global-header {