From 40b2854875f492a0f2ed3e67e765846806253ae5 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期三, 05 三月 2025 22:55:54 +0800
Subject: [PATCH] 高级页面优化
---
src/views/demo/feat/full-screen/index.vue | 33 ++++++++++++---------------------
1 files changed, 12 insertions(+), 21 deletions(-)
diff --git a/src/views/demo/feat/full-screen/index.vue b/src/views/demo/feat/full-screen/index.vue
index 2b14a40..a6d226f 100644
--- a/src/views/demo/feat/full-screen/index.vue
+++ b/src/views/demo/feat/full-screen/index.vue
@@ -19,32 +19,23 @@
ref="domRef"
class="flex items-center justify-center w-1/2 h-64 mx-auto mt-10 bg-white rounded-md"
>
- <a-button type="primary" @click="toggleDom" class="mr-2"> Exit Dom Full Screen </a-button>
+ <a-button type="primary" @click="toggleDom" class="mr-2">
+ {{ isDomFullscreen ? 'Exit Dom Full Screen' : 'Enter Dom Full Screen' }}
+ </a-button>
</div>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref } from 'vue';
- import { CollapseContainer } from '/@/components/Container/index';
+<script lang="ts" setup>
+ import { ref } from 'vue';
+ import { CollapseContainer } from '@/components/Container';
import { useFullscreen } from '@vueuse/core';
- import { PageWrapper } from '/@/components/Page';
+ import { PageWrapper } from '@/components/Page';
+ import { type Nullable } from '@vben/types';
- export default defineComponent({
- components: { CollapseContainer, PageWrapper },
- setup() {
- const domRef = ref<Nullable<HTMLElement>>(null);
- const { enter, toggle, exit, isFullscreen } = useFullscreen();
+ const domRef = ref<Nullable<HTMLElement>>(null);
- const { toggle: toggleDom } = useFullscreen(domRef);
- return {
- enter,
- toggleDom,
- toggle,
- isFullscreen,
- exit,
- domRef,
- };
- },
- });
+ const { enter, toggle, exit, isFullscreen } = useFullscreen();
+
+ const { toggle: toggleDom, isFullscreen: isDomFullscreen } = useFullscreen(domRef);
</script>
--
Gitblit v1.9.3