1234567891011121314151617181920212223242526272829303132333435363738 |
- <script setup lang="ts">
- import { ref } from 'vue';
- import { NModal } from 'naive-ui';
- import { useScroll } from '@/composables/useScroll';
- const { scrollY } = useScroll();
- const { locale } = useI18n();
- const drawerState = ref(false);
- const showModal = ref(false);
- const type = computed(() => scrollY.value > 100 ? 'down' : 'up');
- const changeDrawerState = () => {
- drawerState.value = !drawerState.value;
- }
- const changeModalState = () => {
- showModal.value = true;
- }
- </script>
- <template>
- <section :class="['layout-viewport', locale]">
- <TheHeader @onDrawer="changeDrawerState" @onModal="changeModalState" :state="type" />
- <slot />
- <TheFooter />
- <TheDrawer v-model="drawerState" />
- <BaseDialog v-model="showModal"></BaseDialog>
- </section>
- </template>
- <style scoped lang="scss">
- .layout-viewport {
- position: relative;
- }
- </style>
|