✨ feat: 增加esc关闭功能；优化锁定body逻辑

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": {

src/components/preview-image/src/index.vue

@@ -2,10 +2,13 @@
   <teleport to="body">
     <transition>
       <div
+        ref="refEl"
         class="owl-preview"
         :style="{
           'z-index': zIndex,
         }"
+        tabindex="1"
+        @keyup.esc.exact="close"
         v-if="flag"
       >
         <div
@@ -143,6 +146,8 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
+    const bodyStyleCache = ref<null | string>(null);
+    const refEl = ref(null);
     let flag = ref<boolean>(false);
     let status = ref<number>(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,

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" }]

types/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

types/components/arrow-right.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

types/components/close.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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<boolean>;
+    status: import("vue").Ref<number>;
+    active: import("vue").Ref<number>;
+    uri: import("vue").Ref<string[]>;
+    scale: import("vue").Ref<number>;
+    angle: import("vue").Ref<number>;
+    x: import("vue").Ref<number>;
+    y: import("vue").Ref<number>;
+    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<number>;
+    getCurrIndex: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    src: {
+        type: (StringConstructor | ArrayConstructor)[];
+        required: true;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    zIndex: number;
+    modelValue: boolean;
+    initialIndex: number;
+}>;

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<boolean>;
+    status: import("vue").Ref<number>;
+    active: import("vue").Ref<number>;
+    uri: import("vue").Ref<string[]>;
+    scale: import("vue").Ref<number>;
+    angle: import("vue").Ref<number>;
+    x: import("vue").Ref<number>;
+    y: import("vue").Ref<number>;
+    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<number>;
+    getCurrIndex: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    src: {
+        type: (StringConstructor | ArrayConstructor)[];
+        required: true;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    zIndex: number;
+    modelValue: boolean;
+    initialIndex: number;
+}>;
+export default _default;

types/components/rotate-left.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

types/components/rotate-right.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

types/components/zoom-in.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

types/components/zoom-out.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

types/main.d.ts

@@ -0,0 +1 @@
+export {};

types/router/index.d.ts

@@ -0,0 +1,2 @@
+declare const router: import("vue-router").Router;
+export default router;

types/utils/types.d.ts

@@ -0,0 +1,17 @@
+export declare function type<T extends unknown>(value: T): string;
+export declare namespace type {
+    var prototype: TypeProto;
+}
+interface TypeProto {
+    isObject: <T extends unknown>(val: T) => boolean;
+    isFunction: <T extends unknown>(val: T) => boolean;
+    isArray: <T extends unknown>(val: T) => boolean;
+    isSymbol: <T extends unknown>(val: T) => boolean;
+    isFalse: <T extends never>(val: T) => boolean;
+}
+declare function isObject<T extends unknown>(val: T): boolean;
+declare function isFunction<T extends unknown>(val: T): boolean;
+declare function isArray<T extends unknown>(val: T): boolean;
+declare function isSymbol<T extends unknown>(val: T): boolean;
+export default type;
+export { isObject, isFunction, isArray, isSymbol };

types/views/home.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    a: string;
+    b: string;
+    visible: import("vue").Ref<boolean>;
+    visible1: import("vue").Ref<boolean>;
+    show: () => void;
+    show1: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;