From 2f6d133b965553ba63e4c121c3a6688d25a94225 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: 星期五, 13 八月 2021 07:29:33 +0800
Subject: [PATCH] refactor(application): change to setup syntax
---
src/components/Application/src/AppDarkModeToggle.vue | 50 ++++++++++++++++++--------------------------------
1 files changed, 18 insertions(+), 32 deletions(-)
diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
index aac6408..6b07d92 100644
--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/src/components/Application/src/AppDarkModeToggle.vue
@@ -5,8 +5,8 @@
<SvgIcon size="14" name="moon" />
</div>
</template>
-<script lang="ts">
- import { defineComponent, computed, unref } from 'vue';
+<script lang="ts" setup>
+ import { computed, unref } from 'vue';
import { SvgIcon } from '/@/components/Icon';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
@@ -14,39 +14,25 @@
import { updateDarkTheme } from '/@/logics/theme/dark';
import { ThemeEnum } from '/@/enums/appEnum';
- export default defineComponent({
- name: 'DarkModeToggle',
- components: { SvgIcon },
- setup() {
- const { prefixCls } = useDesign('dark-switch');
- const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
+ const { prefixCls } = useDesign('dark-switch');
+ const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
- const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+ const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
- const getClass = computed(() => [
- prefixCls,
- {
- [`${prefixCls}--dark`]: unref(isDark),
- },
- ]);
-
- function toggleDarkMode() {
- const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
- setDarkMode(darkMode);
- updateDarkTheme(darkMode);
- updateHeaderBgColor();
- updateSidebarBgColor();
- }
-
- return {
- getClass,
- isDark,
- prefixCls,
- toggleDarkMode,
- getShowDarkModeToggle,
- };
+ const getClass = computed(() => [
+ prefixCls,
+ {
+ [`${prefixCls}--dark`]: unref(isDark),
},
- });
+ ]);
+
+ function toggleDarkMode() {
+ const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
+ setDarkMode(darkMode);
+ updateDarkTheme(darkMode);
+ updateHeaderBgColor();
+ updateSidebarBgColor();
+ }
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-dark-switch';
--
Gitblit v1.8.0