diff --git a/packages/index.js b/packages/index.js
index 8ff0386..09a8f67 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,6 +1,9 @@
+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,
diff --git a/packages/upload/image-viewer.vue b/packages/upload/image-viewer.vue
index 4048a9a..52b5456 100644
--- a/packages/upload/image-viewer.vue
+++ b/packages/upload/image-viewer.vue
@@ -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>
diff --git a/packages/upload/index.vue b/packages/upload/index.vue
index d82d6bc..4d2a6b2 100644
--- a/packages/upload/index.vue
+++ b/packages/upload/index.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script>
+// import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
 import ElImageViewer from './image-viewer';
 
 export default {
--
libgit2 0.21.0