diff --git a/packages/devui-vue/devui/image-preview/__tests__/image-preview.spec.ts b/packages/devui-vue/devui/image-preview/__tests__/image-preview.spec.ts index e28a04e70e..75513f13d2 100644 --- a/packages/devui-vue/devui/image-preview/__tests__/image-preview.spec.ts +++ b/packages/devui-vue/devui/image-preview/__tests__/image-preview.spec.ts @@ -32,7 +32,7 @@ describe('image-preview', () => { await img.trigger('click'); const ele = document.querySelector('.devui-image-preview-main-image'); expect(ele).toBeTruthy(); - const closeBtn = document.querySelector('.devui-image-preview-close-btn') as any; + const closeBtn = document.querySelector('.devui-image-preview-close-btn') as HTMLElement; closeBtn.click(); }); @@ -56,7 +56,7 @@ describe('image-preview', () => { }); it('image-preview custom', async () => { - const custom: any = ref({}); + const custom = ref({open: () => true}); const open = () => custom.value.open(); const wrapper = mount( { @@ -81,7 +81,7 @@ describe('image-preview', () => { await customBtn.trigger('click'); const ele = document.querySelector('.devui-image-preview-main-image'); expect(ele).toBeTruthy(); - const closeBtn = document.querySelector('.devui-image-preview-close-btn') as any; + const closeBtn = document.querySelector('.devui-image-preview-close-btn') as HTMLElement; closeBtn.click(); }); }); diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts b/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts index 0b66ba0fab..b8b69ae0e7 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts +++ b/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts @@ -11,7 +11,7 @@ function mountedPreviewImages(props: ImagePreviewProps): void { url: props.url, previewUrlList: props.previewUrlList, zIndex: props.zIndex, - backDropZIndex: props.backDropZIndex + backDropZIndex: props.backDropZIndex, }); } function unmountedPreviewImages() { @@ -19,17 +19,9 @@ function unmountedPreviewImages() { } function getImgByEl(el: HTMLElement): Array { - const urlList = [...el.querySelectorAll('img')].map((item: HTMLImageElement) => - item.getAttribute('src') - ); + const urlList = [...el.querySelectorAll('img')].map((item: HTMLImageElement) => item.getAttribute('src')); return urlList; } -function handleImgByEl(el: PreviewHTMLElement) { - el.addEventListener('click', handleImg); -} -function removeHandle(el: PreviewHTMLElement) { - el.removeEventListener('click', handleImg); -} function handleImg(e: MouseEvent) { e.stopPropagation(); const el = e.currentTarget as PreviewHTMLElement; @@ -41,12 +33,18 @@ function handleImg(e: MouseEvent) { url, previewUrlList: urlList, zIndex: el?.zIndex, - backDropZIndex: el?.backDropZIndex + backDropZIndex: el?.backDropZIndex, }); } } +function handleImgByEl(el: PreviewHTMLElement) { + el.addEventListener('click', handleImg); +} +function removeHandle(el: PreviewHTMLElement) { + el.removeEventListener('click', handleImg); +} export default { - mounted(el: PreviewHTMLElement, binding: BindingTypes | undefined) { + mounted(el: PreviewHTMLElement, binding: BindingTypes | undefined): void { if (!binding.value) { return handleImgByEl(el); } @@ -59,7 +57,7 @@ export default { url: urlList?.[0], previewUrlList: urlList, zIndex: el?.zIndex, - backDropZIndex: el?.backDropZIndex + backDropZIndex: el?.backDropZIndex, }); }; custom.close = () => unmountedPreviewImages(); @@ -69,17 +67,17 @@ export default { } handleImgByEl(el); }, - unmounted() { + unmounted(): void { unmountedPreviewImages(); }, - updated(el: PreviewHTMLElement, binding: UpdateBindingTypes | undefined) { + updated(el: PreviewHTMLElement, binding: UpdateBindingTypes | undefined): void { el.zIndex = binding.value?.zIndex; el.backDropZIndex = binding.value?.backDropZIndex; if (binding.value) { const { value: { disableDefault }, - oldValue: { disableDefault: oldDisableDefault } + oldValue: { disableDefault: oldDisableDefault }, } = binding; if (disableDefault !== oldDisableDefault) { if (disableDefault) { @@ -89,5 +87,5 @@ export default { } } } - } + }, }; diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-service.ts b/packages/devui-vue/devui/image-preview/src/image-preview-service.ts index 866f12464e..f32dc5ebec 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview-service.ts +++ b/packages/devui-vue/devui/image-preview/src/image-preview-service.ts @@ -12,7 +12,7 @@ class ImagePreviewService { // 暂时的禁止滚动穿透,后续应该考虑用modal组件来渲染预览组件 static $overflow = ''; - static open(props: ImagePreviewProps) { + static open(props: ImagePreviewProps): void { this.$body = document.body; this.$div = document.createElement('div'); this.$overflow = this.$body.style.overflow; @@ -21,7 +21,7 @@ class ImagePreviewService { this.$body.style.setProperty('overflow', 'hidden', 'important'); } - static close() { + static close(): void { this.$body?.style.setProperty('overflow', this.$overflow); this.$overflow = null; diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-types.ts b/packages/devui-vue/devui/image-preview/src/image-preview-types.ts index 89d5698be3..2321a7b258 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview-types.ts +++ b/packages/devui-vue/devui/image-preview/src/image-preview-types.ts @@ -4,31 +4,31 @@ export const imagePreviewProps = { url: { type: String, default: '', - required: true + required: true, }, previewUrlList: { type: Array as PropType, default: () => [], - required: true + required: true, }, zIndex: { type: Number, - required: false + required: false, }, backDropZIndex: { type: Number, - required: false - } + required: false, + }, } as const; export interface BindingTypes { value: { - custom?: any; + custom?: Record; disableDefault?: boolean; zIndex?: number; backDropZIndex?: number; }; - [key: string]: any; + [key: string]: unknown; } export interface UpdateBindingTypes extends BindingTypes { oldValue: BindingTypes['value']; diff --git a/packages/devui-vue/devui/image-preview/src/image-preview.tsx b/packages/devui-vue/devui/image-preview/src/image-preview.tsx index 78d3145b50..994c29c936 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview.tsx +++ b/packages/devui-vue/devui/image-preview/src/image-preview.tsx @@ -17,9 +17,7 @@ export default defineComponent({ const bgStyle = props.backDropZIndex ? { zIndex: props.backDropZIndex } : {}; function initTransform() { - const imageElement: HTMLImageElement = document.querySelector( - '.devui-image-preview-main-image' - ); + const imageElement: HTMLImageElement = document.querySelector('.devui-image-preview-main-image'); transform = new Transform(imageElement); } function initIndex() { @@ -51,13 +49,15 @@ export default defineComponent({ } function onKeyDown(event: KeyboardEvent) { - if (event.defaultPrevented) {return;} + if (event.defaultPrevented) { + return; + } - if (event.code == 'Escape') { + if (event.code === 'Escape') { onClose(); - } else if (event.code == 'ArrowLeft') { + } else if (event.code === 'ArrowLeft') { onPrev(); - } else if (event.code == 'ArrowRight') { + } else if (event.code === 'ArrowRight') { onNext(); } } @@ -80,108 +80,134 @@ export default defineComponent({ return () => { return ( -
+
{/* 预览图 */} - + {/* 按钮区 */} - - + {index.value + 1}:{props.previewUrlList.length} -
-
+
); }; - } + }, }); diff --git a/packages/devui-vue/devui/image-preview/src/transform.ts b/packages/devui-vue/devui/image-preview/src/transform.ts index 4861727737..37866744e0 100644 --- a/packages/devui-vue/devui/image-preview/src/transform.ts +++ b/packages/devui-vue/devui/image-preview/src/transform.ts @@ -5,7 +5,7 @@ interface Options { rotate?: number; } interface HTMLElementPlus extends HTMLElement { - onmousewheel?: (...args: any[]) => void; + onmousewheel?: (...args: unknown[]) => void; } export default class Transform { @@ -37,13 +37,13 @@ export default class Transform { this.onDraggable(); this.onMouseWheel(); } - handleDefaultDraggable() { + handleDefaultDraggable(): void { document.body.ondragstart = () => { window.event.returnValue = false; return false; }; } - onDraggable() { + onDraggable(): void { this.el.onmousedown = (e: MouseEvent) => { const ox = e.clientX; const oy = e.clientY; @@ -63,14 +63,14 @@ export default class Transform { this.el.style.cursor = 'grab'; }; } - onMouseWheel() { + onMouseWheel(): void { const handleWheel = this.throttle(this.setMouseWheel, 100); - this.el.onmousewheel = e => { + this.el.onmousewheel = (e) => { const value: number = -e.wheelDelta || e.deltaY || e.detail; handleWheel(value); }; } - throttle(fn: (...args: any[]) => void, t: number) { + throttle(fn: (...args: unknown[]) => void, t: number): void { let timer = null; return (...args) => { if (!timer) { @@ -81,7 +81,7 @@ export default class Transform { } }; } - setMouseWheel(value: number) { + setMouseWheel(value: number): void { if (value < 0) { if (this.zoom >= this.MAX_SCALE) { this.el.style.cursor = 'not-allowed'; @@ -99,32 +99,32 @@ export default class Transform { } this.setPosition(); } - setZoomIn(step = this.STEP) { + setZoomIn(step = this.STEP): void { this.zoom = Math.min(this.MAX_SCALE, this.zoom + step); this.setPosition(); } - setZoomOut(step = this.STEP) { + setZoomOut(step = this.STEP): void { this.zoom = Math.max(this.MIN_SCALE, this.zoom - step); this.setPosition(); } - setZoomBest() { + setZoomBest(): void { this.reset(); this.setPosition(); } - setZoomOriginal() { + setZoomOriginal(): void { this.reset(); this.setPosition(); } - setRotate() { + setRotate(): void { this.rotate += 0.25; this.setPosition(); } - reset() { + reset(): void { this.transformX = this.TRANSFORMX; this.transformY = this.TRANSFORMY; this.zoom = this.ZOOM; } - setPosition() { + setPosition(): void { this.el.style.transform = `translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`; } } diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts index a80942e80b..123f7c614b 100644 --- a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts +++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts @@ -383,8 +383,8 @@ export const CONTRIBUTORS_MAP: IContributingMap = { homepage: 'https://gitee.com/micd' }, { - avatar: 'https://portrait.gitee.com/uploads/avatars/user/413/1241369_sise209_1628127437.png!avatar200', - homepage: 'https://gitee.com/sise209' + avatar: 'https://avatars.githubusercontent.com/u/30541930?v=4', + homepage: 'https://github.com/duqingyu' }, ], card: [ @@ -424,6 +424,10 @@ export const CONTRIBUTORS_MAP: IContributingMap = { }, ], 'image-preview': [ + { + avatar: 'https://avatars.githubusercontent.com/u/30541930?v=4', + homepage: 'https://github.com/duqingyu' + }, { avatar: 'https://avatars.githubusercontent.com/u/10958003?v=4', homepage: 'https://github.com/liuxdi'