feat: 新增ImageViewer关闭方法

刘汉宸
1 parent 762c0c2a
Showing 1 changed file with 23 additions and 7 deletions Show diff stats
packages/index.js
@@ -42,25 +42,41 @@ const install = function(Vue, opts = {}) {
   Vue.component(ElImageViewer.name, ElImageViewer);
 };
+let instance = null;
+
+const closeImageViewer = function(force) {
+  if (instance) {
+    if (force === true) {
+      document.body.removeChild(instance.$el);
+    } else {
+      instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`;
+      setTimeout(function() {
+        document.body.removeChild(instance.$el);
+        instance = null;
+      }, 200);
+    }
+  }
+};
+
 const _ImageViewer = function({ index, src, list, ...other }) {
+  if (instance) {
+    closeImageViewer(true);
+  }
   const ImageViewer = Vue.extend(ElImageViewer);
-  const instance = new ImageViewer({ el: document.createElement('div') });
+  instance = new ImageViewer({ el: document.createElement('div') });
   Object.assign(instance, {
     index: src ? list.findIndex(url => url === src) : index || 0,
     urlList: list,
     ...other,
-    onClose() {
-      instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`;
-      setTimeout(function() {
-        document.body.removeChild(instance.$el);
-      }, 300);
-    },
+    onClose: closeImageViewer,
   });
   document.body.appendChild(instance.$el);
 };
 export const ImageViewer = _ImageViewer;
+ImageViewer.close = closeImageViewer;
+
 export default {
   install,
   ...components,