feat: 预览组件支持函数调用

刘汉宸
1 parent 35f5872c
Showing 3 changed files with 34 additions and 3 deletions Show diff stats
packages/index.js
packages/upload/image-viewer.vue
packages/upload/index.vue
+import Vue from 'vue';
+import ElImageViewer from './upload/image-viewer';
+
 let components = {};
  
-const componentsFiles = require.context('./', true, /\.vue/);
+const componentsFiles = require.context('./', true, /index\.vue/);
 componentsFiles.keys().forEach(path => {
   const component = componentsFiles(path);
   components[component.default.name] = component.default;
@@ -33,8 +36,30 @@ const install = function(Vue, opts = {}) {
     // 将每个子组件注册为全局组件
     Vue.component(name, component);
   });
+  ElImageViewer.install = function(Vue) {
+    Vue.component(ElImageViewer.name, ElImageViewer);
+  };
+  Vue.component(ElImageViewer.name, ElImageViewer);
 };
  
+const _ImageViewer = function({ index, src, list }) {
+  const ImageViewer = Vue.extend(ElImageViewer);
+  const instance = new ImageViewer({ el: document.createElement('div') });
+  Object.assign(instance, {
+    index: src ? list.findIndex(url => url === src) : index,
+    urlList: list,
+    onClose() {
+      instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`;
+      setTimeout(function() {
+        document.body.removeChild(instance.$el);
+      }, 300);
+    },
+  });
+  document.body.appendChild(instance.$el);
+};
+
+export const ImageViewer = _ImageViewer;
+
 export default {
   install,
   ...components,
@@ -26,7 +26,7 @@
           <i class="el-icon-refresh-left el-image-viewer__actions-btn" @click="handleActions('anticlocelise')"></i>
           <i class="el-icon-refresh-right el-image-viewer__actions-btn" @click="handleActions('clocelise')"></i>
           <!-- 自定义修改 -->
-          <span class="el-radio__label">{{ index + 1 }} / {{ urlList.length }}</span>
+          <span class="el-image-viewer__indicator">{{ index + 1 }} / {{ urlList.length }}</span>
         </div>
       </div>
       <!-- CANVAS -->
@@ -67,7 +67,7 @@ const Mode = {
 const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
  
 export default {
-  name: 'elImageViewer',
+  name: 'ElImageViewer',
  
   props: {
     urlList: {
@@ -329,4 +329,9 @@ export default {
     cursor: grabbing;
   }
 }
+.el-image-viewer__indicator {
+  min-width: 60px;
+  text-align: center;
+  font-size: 14px;
+}
 </style>
@@ -6,6 +6,7 @@
 </template>
  
 <script>
+// import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
 import ElImageViewer from './image-viewer';
  
 export default {
	1	+import Vue from 'vue';
	2	+import ElImageViewer from './upload/image-viewer';
	3	+
1	4	let components = {};
2	5
3		-const componentsFiles = require.context('./', true, /\.vue/);
	6	+const componentsFiles = require.context('./', true, /index\.vue/);
4	7	componentsFiles.keys().forEach(path => {
5	8	const component = componentsFiles(path);
6	9	components[component.default.name] = component.default;
...	...	@@ -33,8 +36,30 @@ const install = function(Vue, opts = {}) {
33	36	// 将每个子组件注册为全局组件
34	37	Vue.component(name, component);
35	38	});
	39	+ ElImageViewer.install = function(Vue) {
	40	+ Vue.component(ElImageViewer.name, ElImageViewer);
	41	+ };
	42	+ Vue.component(ElImageViewer.name, ElImageViewer);
36	43	};
37	44
	45	+const _ImageViewer = function({ index, src, list }) {
	46	+ const ImageViewer = Vue.extend(ElImageViewer);
	47	+ const instance = new ImageViewer({ el: document.createElement('div') });
	48	+ Object.assign(instance, {
	49	+ index: src ? list.findIndex(url => url === src) : index,
	50	+ urlList: list,
	51	+ onClose() {
	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	+ }, 300);
	56	+ },
	57	+ });
	58	+ document.body.appendChild(instance.$el);
	59	+};
	60	+
	61	+export const ImageViewer = _ImageViewer;
	62	+
38	63	export default {
39	64	install,
40	65	...components,
...	...
...	...	@@ -26,7 +26,7 @@
26	26	<i class="el-icon-refresh-left el-image-viewer__actions-btn" @click="handleActions('anticlocelise')"></i>
27	27	<i class="el-icon-refresh-right el-image-viewer__actions-btn" @click="handleActions('clocelise')"></i>
28	28	<!-- 自定义修改 -->
29		- <span class="el-radio__label">{{ index + 1 }} / {{ urlList.length }}</span>
	29	+ <span class="el-image-viewer__indicator">{{ index + 1 }} / {{ urlList.length }}</span>
30	30	</div>
31	31	</div>
32	32	<!-- CANVAS -->
...	...	@@ -67,7 +67,7 @@ const Mode = {
67	67	const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
68	68
69	69	export default {
70		- name: 'elImageViewer',
	70	+ name: 'ElImageViewer',
71	71
72	72	props: {
73	73	urlList: {
...	...	@@ -329,4 +329,9 @@ export default {
329	329	cursor: grabbing;
330	330	}
331	331	}
	332	+.el-image-viewer__indicator {
	333	+ min-width: 60px;
	334	+ text-align: center;
	335	+ font-size: 14px;
	336	+}
332	337	</style>
...	...
...	...	@@ -6,6 +6,7 @@
6	6	</template>
7	7
8	8	<script>
	9	+// import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
9	10	import ElImageViewer from './image-viewer';
10	11
11	12	export default {
...	...