From a92db955acfb34163c904e4c83c3a90e6d93b5dd Mon Sep 17 00:00:00 2001 From: wangxiang <1827945911@qq.com> Date: Sat, 16 Apr 2022 16:09:09 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9F=20=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- kicc-ui/src/directives/clickOutside.ts | 39 +++++++------------------- kicc-ui/src/directives/loading.ts | 3 +- kicc-ui/src/directives/permission.ts | 5 +--- kicc-ui/src/directives/repeatClick.ts | 5 +--- kicc-ui/src/directives/ripple/index.ts | 12 ++------ 5 files changed, 15 insertions(+), 49 deletions(-) diff --git a/kicc-ui/src/directives/clickOutside.ts b/kicc-ui/src/directives/clickOutside.ts index 9d99b812..22c4cb8c 100644 --- a/kicc-ui/src/directives/clickOutside.ts +++ b/kicc-ui/src/directives/clickOutside.ts @@ -10,17 +10,12 @@ import { isServer } from '/@/utils/is'; import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue'; type DocumentHandler = (mouseup: T, mousedown: T) => void; - -type FlushList = Map< - HTMLElement, - { - documentHandler: DocumentHandler; - bindingFn: (...args: unknown[]) => unknown; - } ->; +type FlushList = Map unknown; +}>; const nodeList: FlushList = new Map(); - let startClick: MouseEvent; if (!isServer) { @@ -36,38 +31,24 @@ function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): Docu let excludes: HTMLElement[] = []; if (Array.isArray(binding.arg)) { excludes = binding.arg; - } else { - // 由于当前对绑定类型的实现是错误的，这里需要进行类型转换 - excludes.push(binding.arg as unknown as HTMLElement); - } + // 由于当前对绑定类型的实现是错误的，这里需要进行类型转换 + } else excludes.push(binding.arg as unknown as HTMLElement); return function (mouseup, mousedown) { - const popperRef = ( - binding.instance as ComponentPublicInstance<{ - popperRef: Nullable; - }> - ).popperRef; + const popperRef = (binding.instance as ComponentPublicInstance<{ + popperRef: Nullable; + }>).popperRef; const mouseUpTarget = mouseup.target as Node; const mouseDownTarget = mousedown.target as Node; const isBound = !binding || !binding.instance; const isTargetExists = !mouseUpTarget || !mouseDownTarget; const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget); const isSelf = el === mouseUpTarget; - const isTargetExcluded = (excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) || (excludes.length && excludes.includes(mouseDownTarget as HTMLElement)); const isContainedByPopper = popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget)); - if ( - isBound || - isTargetExists || - isContainedByEl || - isSelf || - isTargetExcluded || - isContainedByPopper - ) { - return; - } + if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) return; binding.value(); }; } diff --git a/kicc-ui/src/directives/loading.ts b/kicc-ui/src/directives/loading.ts index 00216ce2..6bc9f874 100644 --- a/kicc-ui/src/directives/loading.ts +++ b/kicc-ui/src/directives/loading.ts @@ -14,8 +14,7 @@ const loadingDirective: Directive = { const background = el.getAttribute('loading-background'); const size = el.getAttribute('loading-size'); const fullscreen = !!binding.modifiers.fullscreen; - const instance = createLoading( - { + const instance = createLoading({ tip, background, size: size || 'large', diff --git a/kicc-ui/src/directives/permission.ts b/kicc-ui/src/directives/permission.ts index 2b24c5fe..ef9a5278 100644 --- a/kicc-ui/src/directives/permission.ts +++ b/kicc-ui/src/directives/permission.ts @@ -12,7 +12,6 @@ import { usePermission } from '/@/hooks/web/usePermission'; function isAuth(el: Element, binding: any) { const { hasPermission } = usePermission(); - const value = binding.value; if (!value) return; if (!hasPermission(value)) { @@ -24,9 +23,7 @@ const mounted = (el: Element, binding: DirectiveBinding) => { isAuth(el, binding); }; -const authDirective: Directive = { - mounted, -}; +const authDirective: Directive = { mounted }; export function setupPermissionDirective(app: App) { app.directive('auth', authDirective); diff --git a/kicc-ui/src/directives/repeatClick.ts b/kicc-ui/src/directives/repeatClick.ts index 5e129d50..4c04ed50 100644 --- a/kicc-ui/src/directives/repeatClick.ts +++ b/kicc-ui/src/directives/repeatClick.ts @@ -14,13 +14,10 @@ const repeatDirective: Directive = { let startTime = 0; const handler = (): void => binding?.value(); const clear = (): void => { - if (Date.now() - startTime < 100) { - handler(); - } + if (Date.now() - startTime < 100) handler(); interval && clearInterval(interval); interval = null; }; - on(el, 'mousedown', (e: MouseEvent): void => { if ((e as any).button !== 0) return; startTime = Date.now(); diff --git a/kicc-ui/src/directives/ripple/index.ts b/kicc-ui/src/directives/ripple/index.ts index b1a1ef20..52c2338a 100644 --- a/kicc-ui/src/directives/ripple/index.ts +++ b/kicc-ui/src/directives/ripple/index.ts @@ -28,13 +28,10 @@ const options: RippleOptions = { const RippleDirective: Directive & RippleProto = { beforeMount: (el: HTMLElement, binding) => { if (binding.value === false) return; - const bg = el.getAttribute('ripple-background'); setProps(Object.keys(binding.modifiers), options); - const background = bg || RippleDirective.background; const zIndex = RippleDirective.zIndex; - el.addEventListener(options.event, (event: EventType) => { rippler({ event, @@ -54,12 +51,7 @@ const RippleDirective: Directive & RippleProto = { }, }; -function rippler({ - event, - el, - zIndex, - background, -}: { event: EventType; el: HTMLElement } & RippleProto) { +function rippler({ event, el, zIndex, background }: { event: EventType; el: HTMLElement } & RippleProto) { const targetBorder = parseInt(getComputedStyle(el).borderWidth.replace('px', '')); const clientX = event.clientX || event.touches[0].clientX; const clientY = event.clientY || event.touches[0].clientY; @@ -79,7 +71,7 @@ function rippler({ const ripple = document.createElement('div'); const rippleContainer = document.createElement('div'); - // Styles for ripple + // 涟漪的样式 ripple.className = 'ripple'; Object.assign(ripple.style ?? {}, {