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,
...	...	@@ -42,25 +42,41 @@ const install = function(Vue, opts = {}) {
42	42	Vue.component(ElImageViewer.name, ElImageViewer);
43	43	};
44	44
	45	+let instance = null;
	46	+
	47	+const closeImageViewer = function(force) {
	48	+ if (instance) {
	49	+ if (force === true) {
	50	+ document.body.removeChild(instance.$el);
	51	+ } else {
	52	+ instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`;
	53	+ setTimeout(function() {
	54	+ document.body.removeChild(instance.$el);
	55	+ instance = null;
	56	+ }, 200);
	57	+ }
	58	+ }
	59	+};
	60	+
45	61	const _ImageViewer = function({ index, src, list, ...other }) {
	62	+ if (instance) {
	63	+ closeImageViewer(true);
	64	+ }
46	65	const ImageViewer = Vue.extend(ElImageViewer);
47		- const instance = new ImageViewer({ el: document.createElement('div') });
	66	+ instance = new ImageViewer({ el: document.createElement('div') });
48	67	Object.assign(instance, {
49	68	index: src ? list.findIndex(url => url === src) : index \|\| 0,
50	69	urlList: list,
51	70	...other,
52		- onClose() {
53		- instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`;
54		- setTimeout(function() {
55		- document.body.removeChild(instance.$el);
56		- }, 300);
57		- },
	71	+ onClose: closeImageViewer,
58	72	});
59	73	document.body.appendChild(instance.$el);
60	74	};
61	75
62	76	export const ImageViewer = _ImageViewer;
63	77
	78	+ImageViewer.close = closeImageViewer;
	79	+
64	80	export default {
65	81	install,
66	82	...components,
...	...