mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
27 lines
858 B
Vue
27 lines
858 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { watch } from 'vue'
|
||
|
|
import { useSidebar } from '../composables/sidebar'
|
||
|
|
import { useFullScreen } from '../composables/fullscreen'
|
||
|
|
import { useToggleWidgets } from '../composables/toggle-widgets'
|
||
|
|
import { breakpoints } from '../constant'
|
||
|
|
import VpNavbar from './vp-navbar.vue'
|
||
|
|
import VpNavFull from './vp-nav-full.vue'
|
||
|
|
|
||
|
|
const { hasSidebar } = useSidebar()
|
||
|
|
const { toggleFullScreen, isFullScreen } = useFullScreen()
|
||
|
|
const close = () => toggleFullScreen(false)
|
||
|
|
|
||
|
|
useToggleWidgets(isFullScreen, () => {
|
||
|
|
if (window.outerWidth >= breakpoints.md) {
|
||
|
|
close()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<header :class="{ navbar: true, 'has-sidebar': hasSidebar }">
|
||
|
|
<VpNavbar :full-screen="isFullScreen" @toggle="toggleFullScreen" />
|
||
|
|
<VpNavFull :full-screen="isFullScreen" @close="close" class="full-screen" />
|
||
|
|
</header>
|
||
|
|
</template>
|