perf(import): perf components import

src/components/Dropdown/index.ts

@@ -1,6 +1,6 @@
 import { withInstall } from '../util';
 
-import Dropdown from './src/Dropdown';
+import Dropdown from './src/Dropdown.vue';
 
 withInstall(Dropdown);
 export * from './src/types';

src/components/Dropdown/src/Dropdown.tsx

@@ -1,57 +0,0 @@
-import type { Trigger } from './types';
-
-import { defineComponent, computed, unref } from 'vue';
-import { Dropdown, Menu } from 'ant-design-vue';
-import Icon from '/@/components/Icon/index';
-
-import { basicDropdownProps } from './props';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-
-export default defineComponent({
-  name: 'Dropdown',
-  props: basicDropdownProps,
-  emits: ['menuEvent'],
-  setup(props, { slots, emit, attrs }) {
-    const getMenuList = computed(() => props.dropMenuList);
-
-    function handleClickMenu({ key }: any) {
-      const menu = unref(getMenuList).find((item) => `${item.event}` === `${key}`);
-      emit('menuEvent', menu);
-    }
-
-    function renderMenus() {
-      return (
-        <Menu onClick={handleClickMenu} selectedKeys={props.selectedKeys}>
-          {() => (
-            <>
-              {unref(getMenuList).map((item) => {
-                const { disabled, icon, text, divider, event } = item;
-                return [
-                  <Menu.Item key={`${event}`} disabled={disabled}>
-                    {() => (
-                      <>
-                        {icon && <Icon icon={icon} />}
-                        <span class="ml-1">{text}</span>
-                      </>
-                    )}
-                  </Menu.Item>,
-                  // @ts-ignore
-                  divider && <Menu.Divider key={`d-${event}`} />,
-                ];
-              })}
-            </>
-          )}
-        </Menu>
-      );
-    }
-
-    return () => (
-      <Dropdown trigger={props.trigger as Trigger[]} {...attrs}>
-        {{
-          default: () => <span>{getSlot(slots)}</span>,
-          overlay: () => renderMenus(),
-        }}
-      </Dropdown>
-    );
-  },
-});

src/components/Dropdown/src/Dropdown.vue

@@ -0,0 +1,70 @@
+<template>
+  <a-dropdown :trigger="trigger" v-bind="$attrs">
+    <span>
+      <slot />
+    </span>
+    <template #overlay>
+      <a-menu :selectedKeys="selectedKeys">
+        <template v-for="item in getMenuList" :key="`${item.event}`">
+          <a-menu-item @click="handleClickMenu({ key: item.event })" :disabled="item.disabled">
+            <Icon :icon="item.icon" v-if="item.icon" />
+            <span class="ml-1">{{ item.text }}</span>
+          </a-menu-item>
+          <a-menu-divider v-if="item.divider" :key="`d-${item.event}`" />
+        </template>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { DropMenu } from './types';
+
+  import { defineComponent, computed, unref } from 'vue';
+  import { Dropdown, Menu } from 'ant-design-vue';
+  import Icon from '/@/components/Icon/index';
+
+  export default defineComponent({
+    name: 'BasicDropdown',
+    components: {
+      [Dropdown.name]: Dropdown,
+      [Menu.name]: Menu,
+      [Menu.Item.name]: Menu.Item,
+      [Menu.Divider.name]: Menu.Divider,
+      Icon,
+    },
+    props: {
+      /**
+       * the trigger mode which executes the drop-down action
+       * @default ['hover']
+       * @type string[]
+       */
+      trigger: {
+        type: [Array] as PropType<string[]>,
+        default: () => {
+          return ['contextmenu'];
+        },
+      },
+      dropMenuList: {
+        type: Array as PropType<DropMenu[]>,
+        default: () => [],
+      },
+      selectedKeys: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+      },
+    },
+    emits: ['menuEvent'],
+    setup(props, { emit }) {
+      const getMenuList = computed(() => props.dropMenuList);
+
+      function handleClickMenu({ key }: { key: string }) {
+        const menu = unref(getMenuList).find((item) => `${item.event}` === `${key}`);
+        emit('menuEvent', menu);
+      }
+
+      return { handleClickMenu, getMenuList };
+    },
+  });
+</script>

src/components/Dropdown/src/props.ts

@@ -1,26 +0,0 @@
-import type { PropType } from 'vue';
-import type { DropMenu } from './types';
-
-export const dropdownProps = {
-  /**
-   * the trigger mode which executes the drop-down action
-   * @default ['hover']
-   * @type string[]
-   */
-  trigger: {
-    type: [Array] as PropType<string[]>,
-    default: () => {
-      return ['contextmenu'];
-    },
-  },
-};
-export const basicDropdownProps = Object.assign({}, dropdownProps, {
-  dropMenuList: {
-    type: Array as PropType<DropMenu[]>,
-    default: () => [],
-  },
-  selectedKeys: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});

src/components/Dropdown/src/types.ts

@@ -7,4 +7,4 @@ export interface DropMenu {
   divider?: boolean;
 }
 
-export type Trigger = 'click' | 'hover' | 'contextMenu';
+// export type Trigger = 'click' | 'hover' | 'contextMenu';