(feat): typescript support

daxiazilong · Feb 25, 2022 · d61d74e · d61d74e
2 parents 85e1052 + e52d3d1
commit d61d74e
Show file tree

Hide file tree

Showing 46 changed files with 10,442 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -64,11 +64,107 @@ let imgObj =  new ImagePreview({
 imgObj.show(n);
 
 // Distroy image preview instance. Remove HTML generated by this ImagePreview instance and other resources. For better performance, then you can set imgObj = null;
-imgObj.distory();
+imgObj.destroy();
 
 ```
 The above code shows two ways about image preview generated, the first way bind click event on the HTMLElement supplied with selector automatically, and the second way requires yourself to bind trigger event manually. Actually, it is very simple, you just call `imgObj.show(n)` in your code where the image preview should open.
 
+#### use with vue:
+HTML:
+```HTML
+<div
+    v-for="(item, index) in imgs"
+    :key="index"
+    @click="showImg(index)"
+>
+    {{index}}
+</div>
+```
+JS:
+```javascript
+import {ImagePreview} from '@daxiazilong/image-preview'
+export default {
+    data () {
+        return {
+            imgs: [
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
+                'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
+            ],
+        }
+    },
+    // for vue3,  vue2.x is [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy)
+    beforeUnmount () {
+        if (this.imgPreview) {
+            this.imgPreview.destroy();
+        }
+    },
+    methods: {
+        showImg(index: any) {
+            if (!this.imgPreview) {
+                this.imgPreview = new ImagePreview({
+                    imgs: [
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
+                        'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
+                    ]
+                });
+            }
+            this.imgPreview.show(index);
+        }
+    },
+}
+```
+                
+#### use with React:
+```javascript
+
+export default() => {
+    // a ref 
+    const imgInstance = useRef(null as unknown as ImagePreview);
+    useEffect(()=> {
+        return () => {
+            if (imgInstance.current) {
+               // never forget to destroy
+                imgInstance.current.destroy();
+            }
+        }
+    }, [])
+
+    const imgs =  [
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
+        'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
+    ];
+    function handleClick (index: number) {
+        if (!imgInstance.current) {
+            imgInstance.current = new ImagePreview({
+                imgs,
+            })
+        }
+        imgInstance.current.show(index);
+    }
+
+    return (<div>
+        {
+            imgs.map((src, index) => {
+                return (
+                    <div key={index} onClick={() =>handleClick(index)}>
+                        {index}
+                    </div>
+                )
+            })
+        }
+    </div>)
+}
+
+```
 ### example
 [click here](https://daxiazilong.github.io/image-preview/index.html) . 
 

diff --git a/REAEME-zh-CN.md b/REAEME-zh-CN.md
@@ -32,6 +32,10 @@
     ```javascript
      import {ImagePreview} from 'js/image-preview-esm.js'
     ```
+    如果由npm安装：
+    ```javascript
+     import {ImagePreview} from '@daxiazilong/image-preview'
+    ```
 #### 用法:
 html:
 ```html
@@ -58,11 +62,109 @@ let imgObj =  new ImagePreview({
 imgObj.show(n);
 
 // Distroy image preview instance. Remove HTML generated by this ImagePreview instance and other resources. For better performance, then you can set imgObj = null;
-imgObj.distory();
+imgObj.destroy();
 
 ```
 上面的代码展示了生成image preview实例的两种方法, 第一种方法会在给定的HTML元素上自动绑定点击事件, 而第二种则需要自己手动绑定触发事件. 实际上, 这是很简单的, 你只需要在你代码需要打开image preview的地方调用 `imgObj.show(n)` 就好.
 
+#### 与vue一起使用:
+HTML:
+```HTML
+<div
+    v-for="(item, index) in imgs"
+    :key="index"
+    @click="showImg(index)"
+>
+    {{index}}
+</div>
+```
+JS:
+```javascript
+import {ImagePreview} from '@daxiazilong/image-preview'
+export default {
+    data () {
+        return {
+            imgs: [
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
+                'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
+                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
+            ],
+        }
+    },
+    // for vue3,  vue2.x is [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy)
+    beforeUnmount () {
+        if (this.imgPreview) {
+            this.imgPreview.destroy();
+        }
+    },
+    methods: {
+        showImg(index: any) {
+            if (!this.imgPreview) {
+                this.imgPreview = new ImagePreview({
+                    imgs: [
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
+                        'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
+                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
+                    ]
+                });
+            }
+            this.imgPreview.show(index);
+        }
+    },
+}
+```
+
+#### 与React一起使用:
+```javascript
+
+export default() => {
+    // a ref 
+    const imgInstance = useRef(null as unknown as ImagePreview);
+    useEffect(()=> {
+        return () => {
+            if (imgInstance.current) {
+               // never forget to destroy
+                imgInstance.current.destroy();
+            }
+        }
+    }, [])
+
+    const imgs =  [
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
+        'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
+    ];
+    function handleClick (index: number) {
+        if (!imgInstance.current) {
+            imgInstance.current = new ImagePreview({
+                imgs,
+            })
+        }
+        imgInstance.current.show(index);
+    }
+
+    return (<div>
+        {
+            imgs.map((src, index) => {
+                return (
+                    <div key={index} onClick={() =>handleClick(index)}>
+                        {index}
+                    </div>
+                )
+            })
+        }
+    </div>)
+}
+
+```
+
+
 ### 例子
 [click here](https://daxiazilong.github.io/image-preview/index.html) . 
 

diff --git a/example/.DS_Store b/example/.DS_Store
diff --git a/example/image-preview/index.html b/example/image-preview/index.html
@@ -76,7 +76,7 @@
       hm.src = "https://hm.baidu.com/hm.js?e301069b9a5d63dcc7066a0a140f2195";
       var s = document.getElementsByTagName("script")[0]; 
       s.parentNode.insertBefore(hm, s);
-    })();</script><script defer="defer" src="test2.1.1.js"></script></head><h1>🌲image preview example</h1><h3>1.Generated by query selector</h3><h4>HTML:</h4><div class="code"><pre>
+    })();</script><script defer="defer" src="test2.2.0.js"></script></head><h1>🌲image preview example</h1><h3>1.Generated by query selector</h3><h4>HTML:</h4><div class="code"><pre>
         &lt;div class="imageWraper"&gt;
             &lt;img data-src="/testImage/main_body3.png" src="/testImage/main_body3.png"&gt;
             &lt;img data-src="/testImage/phone20190624.png" src="/testImage/phone20190624.png"&gt;

diff --git a/example/image-preview/test2.2.0.js b/example/image-preview/test2.2.0.js
diff --git a/example/js/image-preview-iife.js b/example/js/image-preview-iife.js
@@ -2469,6 +2469,10 @@ var imagePreviewModule = (function (exports) {
         };
         ImagePreview.prototype.mobileBeforeClose = function () { };
         ImagePreview.prototype.show = function (index) {
+            if (typeof index !== 'number') {
+                console.error('index is not a number, will use zero as parameter');
+                index = 0;
+            }
             this.actionExecutor.curIndex = index;
             this.actionExecutor.draw(index);
             this.toggleClass(this.ref, this.defToggleClass);