perf: perf component

src/components/Basic/index.ts

@@ -1,3 +1,9 @@
-export { default as BasicArrow } from './src/BasicArrow.vue';
-export { default as BasicHelp } from './src/BasicHelp.vue';
-export { default as BasicTitle } from './src/BasicTitle.vue';
+import BasicArrow from './src/BasicArrow.vue';
+import BasicHelp from './src/BasicHelp.vue';
+import BasicTitle from './src/BasicTitle.vue';
+
+import { withInstall } from '../util';
+
+export { BasicArrow, BasicHelp, BasicTitle };
+
+export default withInstall(BasicArrow, BasicHelp, BasicTitle);

src/components/Basic/src/BasicArrow.vue

@@ -8,27 +8,30 @@
   </span>
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue';
-
   import { defineComponent, computed } from 'vue';
   import { RightOutlined } from '@ant-design/icons-vue';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'BasicArrow',
     components: { RightOutlined },
     props: {
       // Expand contract, expand by default
-      expand: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
+      expand: propTypes.bool,
+      top: propTypes.bool,
+      bottom: propTypes.bool,
     },
     setup(props) {
       const getClass = computed(() => {
-        const preCls = 'base-arrow';
-        const cls = [preCls];
-        props.expand && cls.push(`${preCls}__active`);
-        return cls;
+        const { expand, top, bottom } = props;
+        return [
+          'base-arrow',
+          {
+            'base-arrow__active': expand,
+            top,
+            bottom,
+          },
+        ];
       });
 
       return {
@@ -39,26 +42,29 @@
 </script>
 <style lang="less" scoped>
   .base-arrow {
-    transform: rotate(-90deg);
+    display: inline-block;
+    transform: rotate(0deg);
     transition: all 0.3s ease 0.1s;
     transform-origin: center center;
 
-    &.right {
-      transform: rotate(0deg);
-
-      > span {
-        transition: all 0.3s ease 0.1s !important;
-      }
-    }
-
     &__active {
       transform: rotate(90deg);
     }
 
-    &.right.base-arrow__active {
-      span {
-        transform: rotate(90deg);
-      }
+    &.top {
+      transform: rotate(-90deg);
+    }
+
+    &.bottom {
+      transform: rotate(90deg);
+    }
+
+    &.top.base-arrow__active {
+      transform: rotate(90deg);
+    }
+
+    &.bottom.base-arrow__active {
+      transform: rotate(-90deg);
     }
   }
 </style>

src/components/Basic/src/BasicHelp.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PropType } from 'vue';
+  import type { CSSProperties, PropType } from 'vue';
   import { defineComponent, computed, unref, h } from 'vue';
 
   import { Tooltip } from 'ant-design-vue';
@@ -8,37 +8,24 @@
   import { getPopupContainer } from '/@/utils';
   import { isString, isArray } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'BasicHelp',
     components: { Tooltip },
     props: {
       // max-width
-      maxWidth: {
-        type: String as PropType<string>,
-        default: '600px',
-      },
+      maxWidth: propTypes.string.def('600px'),
       // Whether to display the serial number
-      showIndex: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
+      showIndex: propTypes.bool,
+      // color
+      color: propTypes.string.def('#ffffff'),
+      fontSize: propTypes.string.def('14px'),
+      placement: propTypes.string.def('right'),
+      absolute: propTypes.bool,
       // Text list
       text: {
         type: [Array, String] as PropType<string[] | string>,
       },
-      // color
-      color: {
-        type: String as PropType<string>,
-        default: '#ffffff',
-      },
-      fontSize: {
-        type: String as PropType<string>,
-        default: '14px',
-      },
-      absolute: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
       // 定位
       position: {
         type: [Object] as PropType<any>,
@@ -48,24 +35,24 @@
           bottom: 0,
         }),
       },
-      placement: {
-        type: String as PropType<string>,
-        defualt: 'right',
-      },
     },
     setup(props, { slots }) {
-      const getOverlayStyleRef = computed(() => {
-        return {
-          maxWidth: props.maxWidth,
-        };
-      });
+      const getOverlayStyleRef = computed(
+        (): CSSProperties => {
+          return {
+            maxWidth: props.maxWidth,
+          };
+        }
+      );
 
-      const getWrapStyleRef = computed(() => {
-        return {
-          color: props.color,
-          fontSize: props.fontSize,
-        };
-      });
+      const getWrapStyleRef = computed(
+        (): CSSProperties => {
+          return {
+            color: props.color,
+            fontSize: props.fontSize,
+          };
+        }
+      );
 
       const getMainStyleRef = computed(() => {
         return props.absolute ? props.position : {};
@@ -73,14 +60,17 @@
 
       const renderTitle = () => {
         const list = props.text;
+
         if (isString(list)) {
           return h('p', list);
         }
+
         if (isArray(list)) {
           return list.map((item, index) => {
             return h('p', { key: item }, [props.showIndex ? `${index + 1}. ` : '', item]);
           });
         }
+
         return null;
       };
 
@@ -95,7 +85,7 @@
                 style: unref(getWrapStyleRef),
               },
               [renderTitle()]
-            ) as any,
+            ),
             overlayClassName: 'base-help__wrap',
             autoAdjustOverflow: true,
             overlayStyle: unref(getOverlayStyleRef),

src/components/Basic/src/BasicTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="base-title" :class="{ 'show-span': showSpan && $slots.default }">
+  <span class="base-title" :class="{ 'show-span': span && $slots.default }">
     <slot />
     <BasicHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
   </span>
@@ -10,6 +10,7 @@
   import { defineComponent } from 'vue';
 
   import BasicHelp from './BasicHelp.vue';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'BasicTitle',
@@ -19,13 +20,7 @@
         type: [String, Array] as PropType<string | string[]>,
         default: '',
       },
-      showSpan: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
-    },
-    setup() {
-      return {};
+      span: propTypes.bool,
     },
   });
 </script>