From 8177c1bb3943425b5e133075b2b7214aa7cdf143 Mon Sep 17 00:00:00 2001 From: GuoJiKun Date: Mon, 8 Aug 2022 11:56:52 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E5=A2=9E=E5=8A=A0esc?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E5=8A=9F=E8=83=BD=EF=BC=9B=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E9=94=81=E5=AE=9Abody=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 22 ++++++- src/components/preview-image/src/index.vue | 18 +++++- tsconfig.json | 3 +- types/App.vue.d.ts | 2 + types/components/arrow-right.vue.d.ts | 2 + types/components/close.vue.d.ts | 2 + types/components/preview-image/index.d.ts | 64 +++++++++++++++++++ .../preview-image/src/index.vue.d.ts | 64 +++++++++++++++++++ types/components/rotate-left.vue.d.ts | 2 + types/components/rotate-right.vue.d.ts | 2 + types/components/zoom-in.vue.d.ts | 2 + types/components/zoom-out.vue.d.ts | 2 + types/main.d.ts | 1 + types/router/index.d.ts | 2 + types/utils/types.d.ts | 17 +++++ types/views/home.vue.d.ts | 9 +++ 16 files changed, 208 insertions(+), 6 deletions(-) create mode 100644 types/App.vue.d.ts create mode 100644 types/components/arrow-right.vue.d.ts create mode 100644 types/components/close.vue.d.ts create mode 100644 types/components/preview-image/index.d.ts create mode 100644 types/components/preview-image/src/index.vue.d.ts create mode 100644 types/components/rotate-left.vue.d.ts create mode 100644 types/components/rotate-right.vue.d.ts create mode 100644 types/components/zoom-in.vue.d.ts create mode 100644 types/components/zoom-out.vue.d.ts create mode 100644 types/main.d.ts create mode 100644 types/router/index.d.ts create mode 100644 types/utils/types.d.ts create mode 100644 types/views/home.vue.d.ts diff --git a/package.json b/package.json index c9ef09b..97c49c4 100644 --- a/package.json +++ b/package.json @@ -1,25 +1,41 @@ { "name": "fox-preview-image", "description": "一个支持vue2和vue3的预览图片组件", - "version": "2.4.2", + "version": "2.5.0", "main": "lib/preview-image.umd.js", "module": "lib/preview-image.mjs", "browser": "lib/preview-image.umd.js", + "types": "types/components/preview-image/index.d.ts", + "exports": { + ".": { + "require": "./lib/preview-image.js", + "import": "./lib/preview-image.mjs", + "browser": "./lib/preview-image.umd.js", + "types": "./types/components/preview-image/index.d.ts" + }, + "./lib/style.css": { + "require": "./lib/style.css", + "import": "./lib/style.css", + "browser": "./lib/style.css" + } + }, "keywords": [ "previewImage", "preview", "image", "imagePreview", - "fox" + "fox", + "preview-image" ], "files": [ "lib", + "types/components/preview-image/index.d.ts", "README.md" ], "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", - "lib": "vue-tsc --noEmit && vite build -c vite.config.lib.ts", + "lib": "vue-tsc --declaration --emitDeclarationOnly && vite build -c vite.config.lib.ts", "preview": "vite preview" }, "peerDependencies": { diff --git a/src/components/preview-image/src/index.vue b/src/components/preview-image/src/index.vue index 2dd2545..9d04731 100644 --- a/src/components/preview-image/src/index.vue +++ b/src/components/preview-image/src/index.vue @@ -2,10 +2,13 @@
(null); + const refEl = ref(null); let flag = ref(false); let status = ref(0); let active = @@ -316,19 +321,27 @@ export default defineComponent({ watchEffect(() => { flag.value = props.modelValue; if (props.modelValue) { + if (refEl.value !== null) { + (refEl.value as HTMLElement).focus(); + } const isScrollBar = hasScrollbar(document.body); if (isScrollBar) { document.body.style.paddingRight = getScrollWidth() + "px"; + bodyStyleCache.value = document.body.getAttribute("style"); } + document.body.style.overflow = "hidden"; } else { - document.body.setAttribute("style", ""); + if (bodyStyleCache.value) { + document.body.setAttribute("style", bodyStyleCache.value as string); + } else { + document.body.removeAttribute("style"); + } } }); watchEffect(() => { const type = types(props.src); - // active.value = props.initialIndex; if (type === "string") { active.value = 0; angle.value = 0; @@ -361,6 +374,7 @@ export default defineComponent({ }); return { + refEl, flag, status, active, diff --git a/tsconfig.json b/tsconfig.json index 8bd35d8..7a0cc9c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,8 @@ "baseUrl": ".", "paths": { "@/*": ["src/*"] - } + }, + "declarationDir": "./types" }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] diff --git a/types/App.vue.d.ts b/types/App.vue.d.ts new file mode 100644 index 0000000..5b16cf9 --- /dev/null +++ b/types/App.vue.d.ts @@ -0,0 +1,2 @@ +declare const _default: any; +export default _default; diff --git a/types/components/arrow-right.vue.d.ts b/types/components/arrow-right.vue.d.ts new file mode 100644 index 0000000..5b16cf9 --- /dev/null +++ b/types/components/arrow-right.vue.d.ts @@ -0,0 +1,2 @@ +declare const _default: any; +export default _default; diff --git a/types/components/close.vue.d.ts b/types/components/close.vue.d.ts new file mode 100644 index 0000000..5b16cf9 --- /dev/null +++ b/types/components/close.vue.d.ts @@ -0,0 +1,2 @@ +declare const _default: any; +export default _default; diff --git a/types/components/preview-image/index.d.ts b/types/components/preview-image/index.d.ts new file mode 100644 index 0000000..c061db2 --- /dev/null +++ b/types/components/preview-image/index.d.ts @@ -0,0 +1,64 @@ +import { App } from "vue"; +declare const install: (app: App) => void; +export default install; +export declare const FoxPreviewImage: import("vue").DefineComponent<{ + modelValue: { + type: BooleanConstructor; + default: boolean; + }; + src: { + type: (StringConstructor | ArrayConstructor)[]; + required: true; + }; + zIndex: { + type: NumberConstructor; + default: number; + }; + initialIndex: { + type: NumberConstructor; + default: number; + }; +}, { + flag: import("vue").Ref; + status: import("vue").Ref; + active: import("vue").Ref; + uri: import("vue").Ref; + scale: import("vue").Ref; + angle: import("vue").Ref; + x: import("vue").Ref; + y: import("vue").Ref; + handleMouseMove: (e: MouseEvent) => void; + handleMousewheel: (ev: any) => void; + close: () => void; + prev: () => void; + next: () => void; + mouseup: () => void; + mousedown: (e: MouseEvent) => void; + zoomOut: () => void; + enlarge: () => void; + anticlockwiseRotation: () => void; + clockwiseRotation: () => void; + getCurrScale: import("vue").ComputedRef; + getCurrIndex: import("vue").ComputedRef; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly>, { + zIndex: number; + modelValue: boolean; + initialIndex: number; +}>; diff --git a/types/components/preview-image/src/index.vue.d.ts b/types/components/preview-image/src/index.vue.d.ts new file mode 100644 index 0000000..ef166aa --- /dev/null +++ b/types/components/preview-image/src/index.vue.d.ts @@ -0,0 +1,64 @@ +declare const _default: import("vue").DefineComponent<{ + modelValue: { + type: BooleanConstructor; + default: boolean; + }; + src: { + type: (StringConstructor | ArrayConstructor)[]; + required: true; + }; + zIndex: { + type: NumberConstructor; + default: number; + }; + initialIndex: { + type: NumberConstructor; + default: number; + }; +}, { + flag: import("vue").Ref; + status: import("vue").Ref; + active: import("vue").Ref; + uri: import("vue").Ref; + scale: import("vue").Ref; + angle: import("vue").Ref; + x: import("vue").Ref; + y: import("vue").Ref; + handleMouseMove: (e: MouseEvent) => void; + handleMousewheel: (ev: any) => void; + /**methods */ + close: () => void; + prev: () => void; + next: () => void; + mouseup: () => void; + mousedown: (e: MouseEvent) => void; + zoomOut: () => void; + enlarge: () => void; + anticlockwiseRotation: () => void; + clockwiseRotation: () => void; + /**computed */ + getCurrScale: import("vue").ComputedRef; + getCurrIndex: import("vue").ComputedRef; +}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly>, { + zIndex: number; + modelValue: boolean; + initialIndex: number; +}>; +export default _default; diff --git a/types/components/rotate-left.vue.d.ts b/types/components/rotate-left.vue.d.ts new file mode 100644 index 0000000..5b16cf9 --- /dev/null +++ b/types/components/rotate-left.vue.d.ts @@ -0,0 +1,2 @@ +declare const _default: any; +export default _default; diff --git a/types/components/rotate-right.vue.d.ts b/types/components/rotate-right.vue.d.ts new file mode 100644 index 0000000..5b16cf9 --- /dev/null +++ b/types/components/rotate-right.vue.d.ts @@ -0,0 +1,2 @@ +declare const _default: any; +export default _default; diff --git a/types/components/zoom-in.vue.d.ts b/types/components/zoom-in.vue.d.ts new file mode 100644 index 0000000..5b16cf9 --- /dev/null +++ b/types/components/zoom-in.vue.d.ts @@ -0,0 +1,2 @@ +declare const _default: any; +export default _default; diff --git a/types/components/zoom-out.vue.d.ts b/types/components/zoom-out.vue.d.ts new file mode 100644 index 0000000..5b16cf9 --- /dev/null +++ b/types/components/zoom-out.vue.d.ts @@ -0,0 +1,2 @@ +declare const _default: any; +export default _default; diff --git a/types/main.d.ts b/types/main.d.ts new file mode 100644 index 0000000..509db18 --- /dev/null +++ b/types/main.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/types/router/index.d.ts b/types/router/index.d.ts new file mode 100644 index 0000000..7d414d8 --- /dev/null +++ b/types/router/index.d.ts @@ -0,0 +1,2 @@ +declare const router: import("vue-router").Router; +export default router; diff --git a/types/utils/types.d.ts b/types/utils/types.d.ts new file mode 100644 index 0000000..583b018 --- /dev/null +++ b/types/utils/types.d.ts @@ -0,0 +1,17 @@ +export declare function type(value: T): string; +export declare namespace type { + var prototype: TypeProto; +} +interface TypeProto { + isObject: (val: T) => boolean; + isFunction: (val: T) => boolean; + isArray: (val: T) => boolean; + isSymbol: (val: T) => boolean; + isFalse: (val: T) => boolean; +} +declare function isObject(val: T): boolean; +declare function isFunction(val: T): boolean; +declare function isArray(val: T): boolean; +declare function isSymbol(val: T): boolean; +export default type; +export { isObject, isFunction, isArray, isSymbol }; diff --git a/types/views/home.vue.d.ts b/types/views/home.vue.d.ts new file mode 100644 index 0000000..85cf542 --- /dev/null +++ b/types/views/home.vue.d.ts @@ -0,0 +1,9 @@ +declare const _default: import("vue").DefineComponent<{}, { + a: string; + b: string; + visible: import("vue").Ref; + visible1: import("vue").Ref; + show: () => void; + show1: () => void; +}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly>, {}>; +export default _default;