perf(button): delete the button component useless code

vben
1 parent fb0c7763
Showing 6 changed files with 95 additions and 52 deletions
src/components/Button/index.vue
src/components/ClickOutSide/index.vue
src/components/Scrollbar/src/Bar.tsx
src/setup/directives/repeatClick.ts
src/types/global.d.ts
src/utils/domUtils.ts
 <template>
   <Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
-    <!-- <template #[item]="data" v-for="item in Object.keys($slots)">
-      <slot :name="item" v-bind="data" />
-    </template> -->
     <template #default="data">
-      <Icon :icon="preIcon" class="mr-1" v-if="preIcon" />
+      <Icon :icon="preIcon" :class="{ 'mr-1': !getIsCircleBtn }" v-if="preIcon" />
       <slot v-bind="data" />
-      <Icon :icon="postIcon" class="ml-1" v-if="postIcon" />
+      <Icon :icon="postIcon" :class="{ 'ml-1': !getIsCircleBtn }" v-if="postIcon" />
     </template>
   </Button>
 </template>
 <script lang="ts">
   import { PropType } from 'vue';
-  import { defineComponent, computed, unref } from 'vue';
+  import { defineComponent, computed } from 'vue';
   import { Button } from 'ant-design-vue';
   // import { extendSlots } from '/@/utils/helper/tsxHelper';
-  import { useThrottle } from '/@/hooks/core/useThrottle';
-  import { isFunction } from '/@/utils/is';
+  // import { useThrottle } from '/@/hooks/core/useThrottle';
+  // import { isFunction } from '/@/utils/is';
   import Icon from '/@/components/Icon';
   export default defineComponent({
     name: 'AButton',
@@ -30,18 +27,18 @@
         default: 'default',
       },
       // 节流防抖类型 throttle debounce
-      throttle: {
-        type: String as PropType<'throttle' | 'debounce'>,
-        default: 'throttle',
-      },
+      // throttle: {
+      //   type: String as PropType<'throttle' | 'debounce'>,
+      //   default: 'throttle',
+      // },
       color: {
         type: String as PropType<'error' | 'warning' | 'success' | ''>,
       },
-      // 防抖节流时间
-      throttleTime: {
-        type: Number as PropType<number>,
-        default: 0,
-      },
+      // // 防抖节流时间
+      // throttleTime: {
+      //   type: Number as PropType<number>,
+      //   default: 50,
+      // },
       loading: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -58,30 +55,38 @@
       },
     },
     setup(props, { attrs }) {
-      const getListeners = computed(() => {
-        const { throttle, throttleTime = 0 } = props;
-        // 是否开启节流防抖
-        const throttleType = throttle!.toLowerCase();
-        const isDebounce = throttleType === 'debounce';
-        const openThrottle = ['throttle', 'debounce'].includes(throttleType) && throttleTime > 0;
+      const getIsCircleBtn = computed(() => {
+        return attrs.shape === 'circle';
+      });
+      // const getListeners = computed(() => {
+      //   const { throttle, throttleTime = 0 } = props;
+      //   // 是否开启节流防抖
+      //   const throttleType = throttle!.toLowerCase();
+      //   const isDebounce = throttleType === 'debounce';
+      //   const openThrottle = ['throttle', 'debounce'].includes(throttleType) && throttleTime > 0;
+      //   if (!openThrottle) {
+      //     return {
+      //       ...attrs,
+      //     };
+      //   }
-        const on: {
-          onClick?: Fn;
-        } = {};
+      //   const on: {
+      //     onClick?: Fn;
+      //   } = {};
-        if (attrs.onClick && isFunction(attrs.onClick) && openThrottle) {
-          const [handler] = useThrottle(attrs.onClick as any, throttleTime!, {
-            debounce: isDebounce,
-            immediate: true,
-          });
-          on.onClick = handler;
-        }
+      //   if (attrs.onClick && isFunction(attrs.onClick) && openThrottle) {
+      //     const [handler] = useThrottle(attrs.onClick as any, throttleTime!, {
+      //       debounce: isDebounce,
+      //       immediate: false,
+      //     });
+      //     on.onClick = handler;
+      //   }
-        return {
-          ...attrs,
-          ...on,
-        };
-      });
+      //   return {
+      //     ...attrs,
+      //     ...on,
+      //   };
+      // });
       const getColor = computed(() => {
         const res: string[] = [];
@@ -92,9 +97,10 @@
       });
       const getBindValue = computed((): any => {
-        return { ...unref(getListeners), ...props };
+        return { ...attrs, ...props };
       });
-      return { getBindValue, getColor };
+
+      return { getBindValue, getColor, getIsCircleBtn };
     },
   });
 </script>
@@ -12,9 +12,11 @@
     setup(_, { emit }) {
       const wrapRef = ref<Nullable<HTMLDivElement | null>>(null);
+
       useClickOutside(wrapRef as Ref<HTMLDivElement>, () => {
         emit('clickOutside');
       });
+
       return { wrapRef };
     },
   });
@@ -17,7 +17,7 @@ export default defineComponent({
   setup(props) {
     const thumbRef = ref<Nullable<HTMLDivElement>>(null);
     const elRef = ref<Nullable<HTMLDivElement>>(null);
-    const commonState = reactive<KeyString>({});
+    const commonState = reactive<Indexable>({});
     const getBarRef = computed(() => {
       return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
     });
+import { on, once } from '/@/utils/domUtils';
+
+export default {
+  beforeMount(el: Element, binding: any) {
+    let interval: ReturnType<typeof setInterval> | null = null;
+    let startTime = 0;
+    const handler = () => binding.value && binding.value();
+    const clear = () => {
+      if (Date.now() - startTime < 100) {
+        handler();
+      }
+      interval && clearInterval(interval);
+      interval = null;
+    };
+
+    on(el, 'mousedown', (e) => {
+      if ((e as any).button !== 0) return;
+      startTime = Date.now();
+      once(document as any, 'mouseup', clear);
+      interval && clearInterval(interval);
+      interval = setInterval(handler, 100);
+    });
+  },
+};
@@ -23,15 +23,12 @@ declare type RefType&lt;T&gt; = T | null;
 declare type CustomizedHTMLElement<T> = HTMLElement & T;
-declare type Indexable<T> = {
+declare type Indexable<T = any> = {
   [key: string]: T;
 };
+declare type Hash<T> = Indexable<T>;
-declare type KeyString<T = any> = {
-  [key: string]: T;
-};
-
-type DeepPartial<T> = {
+declare type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends (infer U)[]
     ? RecursivePartial<U>[]
     : T[P] extends object
@@ -39,11 +36,11 @@ type DeepPartial&lt;T&gt; = {
     : T[P];
 };
-type SelectOptions = {
+declare type SelectOptions = {
   label: string;
   value: any;
 }[];
-type EmitType = (event: string, ...args: any[]) => void;
+declare type EmitType = (event: string, ...args: any[]) => void;
-type TargetContext = '_self' | '_blank';
+declare type TargetContext = '_self' | '_blank';
@@ -15,9 +15,11 @@ export function getBoundingClientRect(element: Element): DOMRect | number {
   }
   return element.getBoundingClientRect();
 }
+
 const trim = function (string: string) {
   return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
 };
+
 /* istanbul ignore next */
 export function hasClass(el: Element, cls: string) {
   if (!el || !cls) return false;
@@ -28,6 +30,7 @@ export function hasClass(el: Element, cls: string) {
     return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
   }
 }
+
 /* istanbul ignore next */
 export function addClass(el: Element, cls: string) {
   if (!el) return;
@@ -130,7 +133,7 @@ export function hackCss(attr: string, value: string) {
 /* istanbul ignore next */
 export const on = function (
-  element: HTMLElement | Document | Window,
+  element: Element | HTMLElement | Document | Window,
   event: string,
   handler: EventListenerOrEventListenerObject
 ): void {
@@ -141,7 +144,7 @@ export const on = function (
 /* istanbul ignore next */
 export const off = function (
-  element: HTMLElement | Document | Window,
+  element: Element | HTMLElement | Document | Window,
   event: string,
   handler: Fn
 ): void {
@@ -149,3 +152,14 @@ export const off = function (
     element.removeEventListener(event, handler, false);
   }
 };
+
+/* istanbul ignore next */
+export const once = function (el: HTMLElement, event: string, fn: EventListener): void {
+  const listener = function (this: any, ...args: unknown[]) {
+    if (fn) {
+      fn.apply(this, args);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+};