vitepress-plugin-image-viewer - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

lib/viewer.js

 import Viewer from 'viewerjs';
 import { nextTick, onMounted, watch } from 'vue';
+let viewer = null;
 /**
  * 给图片添加预览功能
  */
-const setViewer = (el = '.vp-doc img', option) => {
+const setViewer = (el = '.vp-doc', option) => {
     // 默认配置
@@ -20,13 +21,5 @@ const defaultBaseOption = {
     };
-    document.querySelectorAll(el).forEach((item) => {
-        item.onclick = () => {
-            const viewer = new Viewer(item, {
-                ...defaultBaseOption,
-                ...option,
-                hide(e) {
-                    viewer.destroy();
-                }
-            });
-            viewer.show();
-        };
+    viewer = new Viewer(document.querySelector(el), {
+        ...defaultBaseOption,
+        ...option
     });
@@ -45,6 +38,6 @@ };
     onMounted(() => {
-        console.log(`初始化预览器`);
         setViewer(el, option);
     });
     watch(() => route.path, () => nextTick(() => {
+        viewer?.destroy();
         setViewer(el, option);
@@ -51,0 +44,0 @@ }));

lib/viewer.ts

@@ -5,6 +5,8 @@ import Viewer from 'viewerjs';
 
+let viewer: Viewer | null = null;
+
 /**
  * 给图片添加预览功能
  */
-const setViewer = (el: string = '.vp-doc img', option?: Viewer.Options) => {
+const setViewer = (el: string = '.vp-doc', option?: Viewer.Options) => {
     // 默认配置
@@ -23,14 +25,6 @@ const defaultBaseOption: Viewer.Options = {
     }
-    document.querySelectorAll(el).forEach((item: Element) => {
-        (item as HTMLElement).onclick = () => {
-            const viewer = new Viewer(<HTMLElement>item, {
-                ...defaultBaseOption,
-                ...option,
-                hide(e) {
-                    viewer.destroy();
-                }
-            });
-            viewer.show()
-        }
-    });
+    viewer = new Viewer(<HTMLElement>document.querySelector(el), {
+        ...defaultBaseOption,
+        ...option
+    })
 };
@@ -49,6 +43,6 @@
     onMounted(() => {
-        console.log(`初始化预览器`)
         setViewer(el, option);
     })
     watch(() => route.path, () => nextTick(() => {
+        viewer?.destroy();
         setViewer(el, option);
@@ -55,0 +49,0 @@ }));

package.json

 {
   "name": "vitepress-plugin-image-viewer",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "image viewer for vitepress",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -18,2 +18,6 @@ # vitepress-plugin-image-viewer
 yarn add vitepress-plugin-image-viewer
+// pnpm
+pnpm add vitepress-plugin-image-viewer
+// Tip: If you use pnpm to install, you need to install viewerjs additionally.
+pnpm add viewerjs
 ```
@@ -23,4 +27,5 @@
 
+In `.vitepress/theme/index`
+
 ```js
-// .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme';
@@ -57,3 +62,3 @@ import 'viewerjs/dist/viewer.min.css';
   
-    CSS selector (Default `.vp-doc img`, can be empty, this is not required)
+    CSS selector (Default `.vp-doc`, can be empty, this is not required)
 
@@ -60,0 +65,0 @@ - option

No alert changes

Improved metrics

Number of lines in readme file

82

increased by6.49%

Worsened metrics

Total package byte prevSize

7107

decreased by-4.45%

Lines of code

102

decreased by-12.07%

No dependency changes