perf: 组件修改为setup

jinmao88
1 parent ca997c15
Showing 5 changed files with 15 additions and 44 deletions
src/layouts/default/header/index.vue
src/layouts/default/sider/LayoutSider.vue
src/layouts/default/trigger/HeaderTrigger.vue
src/layouts/default/trigger/SiderTrigger.vue
src/layouts/default/trigger/index.vue
@@ -60,19 +60,16 @@
   import { propTypes } from '/@/utils/propTypes';
   import { Layout } from 'ant-design-vue';
-  import { AppLogo } from '/@/components/Application';
+  import { AppLogo, AppSearch, AppLocalePicker } from '/@/components/Application';
   import LayoutMenu from '../menu/index.vue';
   import LayoutTrigger from '../trigger/index.vue';
-  import { AppSearch } from '/@/components/Application';
-
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
   import { SettingButtonPositionEnum } from '/@/enums/appEnum';
-  import { AppLocalePicker } from '/@/components/Application';
   import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
   import { useAppInject } from '/@/hooks/web/useAppInject';
@@ -31,15 +31,13 @@
   import { Layout } from 'ant-design-vue';
   import LayoutMenu from '../menu/index.vue';
   import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
-
   import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
-
   import DragBar from './DragBar.vue';
+
   export default defineComponent({
     name: 'LayoutSideBar',
     components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
@@ -3,23 +3,15 @@
     <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';
-  export default defineComponent({
-    name: 'HeaderTrigger',
-    components: { MenuUnfoldOutlined, MenuFoldOutlined },
-    props: {
-      theme: propTypes.oneOf(['light', 'dark']),
-    },
-    setup() {
-      const { getCollapsed, toggleCollapsed } = useMenuSetting();
-      const { prefixCls } = useDesign('layout-header-trigger');
-      return { getCollapsed, toggleCollapsed, prefixCls };
-    },
+  defineProps({
+    theme: propTypes.oneOf(['light', 'dark']),
   });
+  const { getCollapsed, toggleCollapsed } = useMenuSetting();
+  const { prefixCls } = useDesign('layout-header-trigger');
 </script>
@@ -4,18 +4,9 @@
     <DoubleLeftOutlined v-else />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  export default defineComponent({
-    name: 'SiderTrigger',
-    components: { DoubleRightOutlined, DoubleLeftOutlined },
-    setup() {
-      const { getCollapsed, toggleCollapsed } = useMenuSetting();
-
-      return { getCollapsed, toggleCollapsed };
-    },
-  });
+  const { getCollapsed, toggleCollapsed } = useMenuSetting();
 </script>
@@ -2,21 +2,14 @@
   <SiderTrigger v-if="sider" />
   <HeaderTrigger v-else :theme="theme" />
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+<script lang="ts"></script>
+<script lang="ts" setup>
   import { propTypes } from '/@/utils/propTypes';
   import HeaderTrigger from './HeaderTrigger.vue';
+  import SiderTrigger from './SiderTrigger.vue';
-  export default defineComponent({
-    name: 'LayoutTrigger',
-    components: {
-      SiderTrigger: createAsyncComponent(() => import('./SiderTrigger.vue')),
-      HeaderTrigger: HeaderTrigger,
-    },
-    props: {
-      sider: propTypes.bool.def(true),
-      theme: propTypes.oneOf(['light', 'dark']),
-    },
+  defineProps({
+    sider: propTypes.bool.def(true),
+    theme: propTypes.oneOf(['light', 'dark']),
   });
 </script>