cy-element-ui 1.1.14 → 1.1.16

package/lib/image.js

@@ -241,7 +241,7 @@ module.exports = require("element-ui/lib/mixins/locale");
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/main.vue?vue&type=template&id=4fd72cff
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/main.vue?vue&type=template&id=068b64ea
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
@@ -303,10 +303,10 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=template&id=4fd72cff
+// CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=template&id=068b64ea
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/image-viewer.vue?vue&type=template&id=57f58260
-var image_viewervue_type_template_id_57f58260_render = function () {
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/image-viewer.vue?vue&type=template&id=60748e5f
+var image_viewervue_type_template_id_60748e5f_render = function () {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
@@ -431,11 +431,11 @@ var image_viewervue_type_template_id_57f58260_render = function () {
     ),
   ])
 }
-var image_viewervue_type_template_id_57f58260_staticRenderFns = []
-image_viewervue_type_template_id_57f58260_render._withStripped = true
+var image_viewervue_type_template_id_60748e5f_staticRenderFns = []
+image_viewervue_type_template_id_60748e5f_render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=template&id=57f58260
+// CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=template&id=60748e5f
 
 // EXTERNAL MODULE: external "element-ui/lib/utils/dom"
 var dom_ = __webpack_require__(2);
@@ -508,300 +508,300 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 
 var Mode = {
-  CONTAIN: {
-    name: 'contain',
-    icon: 'el-icon-full-screen'
-  },
-  ORIGINAL: {
-    name: 'original',
-    icon: 'el-icon-c-scale-to-original'
-  }
+	CONTAIN: {
+		name: 'contain',
+		icon: 'el-icon-full-screen'
+	},
+	ORIGINAL: {
+		name: 'original',
+		icon: 'el-icon-c-scale-to-original'
+	}
 };
 
 var mousewheelEventName = Object(util_["isFirefox"])() ? 'DOMMouseScroll' : 'mousewheel';
 
 /* harmony default export */ var image_viewervue_type_script_lang_js = ({
-  name: 'elImageViewer',
-
-  props: {
-    urlList: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    zIndex: {
-      type: Number,
-      default: 2000
-    },
-    onSwitch: {
-      type: Function,
-      default: function _default() {}
-    },
-    onClose: {
-      type: Function,
-      default: function _default() {}
-    },
-    initialIndex: {
-      type: Number,
-      default: 0
-    },
-    appendToBody: {
-      type: Boolean,
-      default: true
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data: function data() {
-    return {
-      index: this.initialIndex,
-      isShow: false,
-      infinite: true,
-      loading: false,
-      mode: Mode.CONTAIN,
-      transform: {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      }
-    };
-  },
-
-  computed: {
-    isSingle: function isSingle() {
-      return this.urlList.length <= 1;
-    },
-    isFirst: function isFirst() {
-      return this.index === 0;
-    },
-    isLast: function isLast() {
-      return this.index === this.urlList.length - 1;
-    },
-    currentImg: function currentImg() {
-      return this.urlList[this.index];
-    },
-    imgStyle: function imgStyle() {
-      var _transform = this.transform,
-          scale = _transform.scale,
-          deg = _transform.deg,
-          offsetX = _transform.offsetX,
-          offsetY = _transform.offsetY,
-          enableTransition = _transform.enableTransition;
-
-      var style = {
-        transform: 'scale(' + scale + ') rotate(' + deg + 'deg)',
-        transition: enableTransition ? 'transform .3s' : '',
-        'margin-left': offsetX + 'px',
-        'margin-top': offsetY + 'px'
-      };
-      if (this.mode === Mode.CONTAIN) {
-        style.maxWidth = style.maxHeight = '100%';
-      }
-      return style;
-    },
-    viewerZIndex: function viewerZIndex() {
-      var nextZIndex = popup_["PopupManager"].nextZIndex();
-      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
-    }
-  },
-  watch: {
-    index: {
-      handler: function handler(val) {
-        this.reset();
-        this.onSwitch(val);
-      }
-    },
-    currentImg: function currentImg(val) {
-      var _this = this;
-
-      this.$nextTick(function (_) {
-        var $img = _this.$refs.img[0];
-        if (!$img.complete) {
-          _this.loading = true;
-        }
-      });
-    }
-  },
-  methods: {
-    hide: function hide() {
-      this.deviceSupportUninstall();
-      this.onClose();
-    },
-    deviceSupportInstall: function deviceSupportInstall() {
-      var _this2 = this;
-
-      this._keyDownHandler = function (e) {
-        e.stopPropagation();
-        var keyCode = e.keyCode;
-        switch (keyCode) {
-          // ESC
-          case 27:
-            _this2.hide();
-            break;
-          // SPACE
-          case 32:
-            _this2.toggleMode();
-            break;
-          // LEFT_ARROW
-          case 37:
-            _this2.prev();
-            break;
-          // UP_ARROW
-          case 38:
-            _this2.handleActions('zoomIn');
-            break;
-          // RIGHT_ARROW
-          case 39:
-            _this2.next();
-            break;
-          // DOWN_ARROW
-          case 40:
-            _this2.handleActions('zoomOut');
-            break;
-        }
-      };
-      this._mouseWheelHandler = Object(util_["rafThrottle"])(function (e) {
-        var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
-        if (delta > 0) {
-          _this2.handleActions('zoomIn', {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        } else {
-          _this2.handleActions('zoomOut', {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        }
-      });
-      Object(dom_["on"])(document, 'keydown', this._keyDownHandler);
-      Object(dom_["on"])(document, mousewheelEventName, this._mouseWheelHandler);
-    },
-    deviceSupportUninstall: function deviceSupportUninstall() {
-      Object(dom_["off"])(document, 'keydown', this._keyDownHandler);
-      Object(dom_["off"])(document, mousewheelEventName, this._mouseWheelHandler);
-      this._keyDownHandler = null;
-      this._mouseWheelHandler = null;
-    },
-    handleImgLoad: function handleImgLoad(e) {
-      this.loading = false;
-    },
-    handleImgError: function handleImgError(e) {
-      this.loading = false;
-      e.target.alt = '加载失败';
-    },
-    handleMouseDown: function handleMouseDown(e) {
-      var _this3 = this;
-
-      if (this.loading || e.button !== 0) return;
-
-      var _transform2 = this.transform,
-          offsetX = _transform2.offsetX,
-          offsetY = _transform2.offsetY;
-
-      var startX = e.pageX;
-      var startY = e.pageY;
-      this._dragHandler = Object(util_["rafThrottle"])(function (ev) {
-        _this3.transform.offsetX = offsetX + ev.pageX - startX;
-        _this3.transform.offsetY = offsetY + ev.pageY - startY;
-      });
-      Object(dom_["on"])(document, 'mousemove', this._dragHandler);
-      Object(dom_["on"])(document, 'mouseup', function (ev) {
-        Object(dom_["off"])(document, 'mousemove', _this3._dragHandler);
-      });
-
-      e.preventDefault();
-    },
-    handleMaskClick: function handleMaskClick() {
-      if (this.maskClosable) {
-        this.hide();
-      }
-    },
-    reset: function reset() {
-      this.transform = {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      };
-    },
-    toggleMode: function toggleMode() {
-      if (this.loading) return;
-
-      var modeNames = Object.keys(Mode);
-      var modeValues = Object.values(Mode);
-      var index = modeValues.indexOf(this.mode);
-      var nextIndex = (index + 1) % modeNames.length;
-      this.mode = Mode[modeNames[nextIndex]];
-      this.reset();
-    },
-    prev: function prev() {
-      if (this.isFirst && !this.infinite) return;
-      var len = this.urlList.length;
-      this.index = (this.index - 1 + len) % len;
-    },
-    next: function next() {
-      if (this.isLast && !this.infinite) return;
-      var len = this.urlList.length;
-      this.index = (this.index + 1) % len;
-    },
-    handleActions: function handleActions(action) {
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-      if (this.loading) return;
-
-      var _zoomRate$rotateDeg$e = _extends({
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: true
-      }, options),
-          zoomRate = _zoomRate$rotateDeg$e.zoomRate,
-          rotateDeg = _zoomRate$rotateDeg$e.rotateDeg,
-          enableTransition = _zoomRate$rotateDeg$e.enableTransition;
-
-      var transform = this.transform;
-
-      switch (action) {
-        case 'zoomOut':
-          if (transform.scale > 0.2) {
-            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
-          }
-          break;
-        case 'zoomIn':
-          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
-          break;
-        case 'clocelise':
-          transform.deg += rotateDeg;
-          break;
-        case 'anticlocelise':
-          transform.deg -= rotateDeg;
-          break;
-      }
-      transform.enableTransition = enableTransition;
-    }
-  },
-  mounted: function mounted() {
-    this.deviceSupportInstall();
-    if (this.appendToBody) {
-      document.body.appendChild(this.$el);
-    }
-    // add tabindex then wrapper can be focusable via Javascript
-    // focus wrapper so arrow key can't cause inner scroll behavior underneath
-    this.$refs['el-image-viewer__wrapper'].focus();
-  },
-  destroyed: function destroyed() {
-    // if appendToBody is true, remove DOM node after destroy
-    if (this.appendToBody && this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
-    }
-  }
+	name: 'ElImageViewer',
+
+	props: {
+		urlList: {
+			type: Array,
+			default: function _default() {
+				return [];
+			}
+		},
+		zIndex: {
+			type: Number,
+			default: 2000
+		},
+		onSwitch: {
+			type: Function,
+			default: function _default() {}
+		},
+		onClose: {
+			type: Function,
+			default: function _default() {}
+		},
+		initialIndex: {
+			type: Number,
+			default: 0
+		},
+		appendToBody: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	data: function data() {
+		return {
+			index: this.initialIndex,
+			isShow: false,
+			infinite: true,
+			loading: false,
+			mode: Mode.CONTAIN,
+			transform: {
+				scale: 1,
+				deg: 0,
+				offsetX: 0,
+				offsetY: 0,
+				enableTransition: false
+			}
+		};
+	},
+
+	computed: {
+		isSingle: function isSingle() {
+			return this.urlList.length <= 1;
+		},
+		isFirst: function isFirst() {
+			return this.index === 0;
+		},
+		isLast: function isLast() {
+			return this.index === this.urlList.length - 1;
+		},
+		currentImg: function currentImg() {
+			return this.urlList[this.index];
+		},
+		imgStyle: function imgStyle() {
+			var _transform = this.transform,
+			    scale = _transform.scale,
+			    deg = _transform.deg,
+			    offsetX = _transform.offsetX,
+			    offsetY = _transform.offsetY,
+			    enableTransition = _transform.enableTransition;
+
+			var style = {
+				transform: 'scale(' + scale + ') rotate(' + deg + 'deg)',
+				transition: enableTransition ? 'transform .3s' : '',
+				'margin-left': offsetX + 'px',
+				'margin-top': offsetY + 'px'
+			};
+			if (this.mode === Mode.CONTAIN) {
+				style.maxWidth = style.maxHeight = '100%';
+			}
+			return style;
+		},
+		viewerZIndex: function viewerZIndex() {
+			var nextZIndex = popup_["PopupManager"].nextZIndex();
+			return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
+		}
+	},
+	watch: {
+		index: {
+			handler: function handler(val) {
+				this.reset();
+				this.onSwitch(val);
+			}
+		},
+		currentImg: function currentImg(val) {
+			var _this = this;
+
+			this.$nextTick(function (_) {
+				var $img = _this.$refs.img[0];
+				if (!$img.complete) {
+					_this.loading = true;
+				}
+			});
+		}
+	},
+	methods: {
+		hide: function hide() {
+			this.deviceSupportUninstall();
+			this.onClose();
+		},
+		deviceSupportInstall: function deviceSupportInstall() {
+			var _this2 = this;
+
+			this._keyDownHandler = function (e) {
+				e.stopPropagation();
+				var keyCode = e.keyCode;
+				switch (keyCode) {
+					// ESC
+					case 27:
+						_this2.hide();
+						break;
+					// SPACE
+					case 32:
+						_this2.toggleMode();
+						break;
+					// LEFT_ARROW
+					case 37:
+						_this2.prev();
+						break;
+					// UP_ARROW
+					case 38:
+						_this2.handleActions('zoomIn');
+						break;
+					// RIGHT_ARROW
+					case 39:
+						_this2.next();
+						break;
+					// DOWN_ARROW
+					case 40:
+						_this2.handleActions('zoomOut');
+						break;
+				}
+			};
+			this._mouseWheelHandler = Object(util_["rafThrottle"])(function (e) {
+				var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+				if (delta > 0) {
+					_this2.handleActions('zoomIn', {
+						zoomRate: 0.015,
+						enableTransition: false
+					});
+				} else {
+					_this2.handleActions('zoomOut', {
+						zoomRate: 0.015,
+						enableTransition: false
+					});
+				}
+			});
+			Object(dom_["on"])(document, 'keydown', this._keyDownHandler);
+			Object(dom_["on"])(document, mousewheelEventName, this._mouseWheelHandler);
+		},
+		deviceSupportUninstall: function deviceSupportUninstall() {
+			Object(dom_["off"])(document, 'keydown', this._keyDownHandler);
+			Object(dom_["off"])(document, mousewheelEventName, this._mouseWheelHandler);
+			this._keyDownHandler = null;
+			this._mouseWheelHandler = null;
+		},
+		handleImgLoad: function handleImgLoad(e) {
+			this.loading = false;
+		},
+		handleImgError: function handleImgError(e) {
+			this.loading = false;
+			e.target.alt = '加载失败';
+		},
+		handleMouseDown: function handleMouseDown(e) {
+			var _this3 = this;
+
+			if (this.loading || e.button !== 0) return;
+
+			var _transform2 = this.transform,
+			    offsetX = _transform2.offsetX,
+			    offsetY = _transform2.offsetY;
+
+			var startX = e.pageX;
+			var startY = e.pageY;
+			this._dragHandler = Object(util_["rafThrottle"])(function (ev) {
+				_this3.transform.offsetX = offsetX + ev.pageX - startX;
+				_this3.transform.offsetY = offsetY + ev.pageY - startY;
+			});
+			Object(dom_["on"])(document, 'mousemove', this._dragHandler);
+			Object(dom_["on"])(document, 'mouseup', function (ev) {
+				Object(dom_["off"])(document, 'mousemove', _this3._dragHandler);
+			});
+
+			e.preventDefault();
+		},
+		handleMaskClick: function handleMaskClick() {
+			if (this.maskClosable) {
+				this.hide();
+			}
+		},
+		reset: function reset() {
+			this.transform = {
+				scale: 1,
+				deg: 0,
+				offsetX: 0,
+				offsetY: 0,
+				enableTransition: false
+			};
+		},
+		toggleMode: function toggleMode() {
+			if (this.loading) return;
+
+			var modeNames = Object.keys(Mode);
+			var modeValues = Object.values(Mode);
+			var index = modeValues.indexOf(this.mode);
+			var nextIndex = (index + 1) % modeNames.length;
+			this.mode = Mode[modeNames[nextIndex]];
+			this.reset();
+		},
+		prev: function prev() {
+			if (this.isFirst && !this.infinite) return;
+			var len = this.urlList.length;
+			this.index = (this.index - 1 + len) % len;
+		},
+		next: function next() {
+			if (this.isLast && !this.infinite) return;
+			var len = this.urlList.length;
+			this.index = (this.index + 1) % len;
+		},
+		handleActions: function handleActions(action) {
+			var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+			if (this.loading) return;
+
+			var _zoomRate$rotateDeg$e = _extends({
+				zoomRate: 0.2,
+				rotateDeg: 90,
+				enableTransition: true
+			}, options),
+			    zoomRate = _zoomRate$rotateDeg$e.zoomRate,
+			    rotateDeg = _zoomRate$rotateDeg$e.rotateDeg,
+			    enableTransition = _zoomRate$rotateDeg$e.enableTransition;
+
+			var transform = this.transform;
+
+			switch (action) {
+				case 'zoomOut':
+					if (transform.scale > 0.2) {
+						transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+					}
+					break;
+				case 'zoomIn':
+					transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+					break;
+				case 'clocelise':
+					transform.deg += rotateDeg;
+					break;
+				case 'anticlocelise':
+					transform.deg -= rotateDeg;
+					break;
+			}
+			transform.enableTransition = enableTransition;
+		}
+	},
+	mounted: function mounted() {
+		this.deviceSupportInstall();
+		if (this.appendToBody) {
+			document.body.appendChild(this.$el);
+		}
+		// add tabindex then wrapper can be focusable via Javascript
+		// focus wrapper so arrow key can't cause inner scroll behavior underneath
+		this.$refs['el-image-viewer__wrapper'].focus();
+	},
+	destroyed: function destroyed() {
+		// if appendToBody is true, remove DOM node after destroy
+		if (this.appendToBody && this.$el && this.$el.parentNode) {
+			this.$el.parentNode.removeChild(this.$el);
+		}
+	}
 });
 // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=script&lang=js
  /* harmony default export */ var src_image_viewervue_type_script_lang_js = (image_viewervue_type_script_lang_js); 
@@ -818,8 +818,8 @@ var componentNormalizer = __webpack_require__(0);
 
 var component = Object(componentNormalizer["a" /* default */])(
   src_image_viewervue_type_script_lang_js,
-  image_viewervue_type_template_id_57f58260_render,
-  image_viewervue_type_template_id_57f58260_staticRenderFns,
+  image_viewervue_type_template_id_60748e5f_render,
+  image_viewervue_type_template_id_60748e5f_staticRenderFns,
   false,
   null,
   null,
@@ -871,235 +871,235 @@ var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
 
 
 var isSupportObjectFit = function isSupportObjectFit() {
-  return document.documentElement.style.objectFit !== undefined;
+	return document.documentElement.style.objectFit !== undefined;
 };
 
 var ObjectFit = {
-  NONE: 'none',
-  CONTAIN: 'contain',
-  COVER: 'cover',
-  FILL: 'fill',
-  SCALE_DOWN: 'scale-down'
+	NONE: 'none',
+	CONTAIN: 'contain',
+	COVER: 'cover',
+	FILL: 'fill',
+	SCALE_DOWN: 'scale-down'
 };
 
 var prevOverflow = '';
 
 /* harmony default export */ var mainvue_type_script_lang_js = ({
-  name: 'ElImage',
-
-  mixins: [locale_default.a],
-  inheritAttrs: false,
-
-  components: {
-    ImageViewer: image_viewer
-  },
-
-  props: {
-    src: String,
-    fit: String,
-    lazy: Boolean,
-    scrollContainer: {},
-    previewSrcList: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    zIndex: {
-      type: Number,
-      default: 2000
-    },
-    initialIndex: Number
-  },
-
-  data: function data() {
-    return {
-      loading: true,
-      error: false,
-      show: !this.lazy,
-      imageWidth: 0,
-      imageHeight: 0,
-      showViewer: false
-    };
-  },
-
-
-  computed: {
-    imageStyle: function imageStyle() {
-      var fit = this.fit;
-
-      if (!this.$isServer && fit) {
-        return isSupportObjectFit() ? { 'object-fit': fit } : this.getImageStyle(fit);
-      }
-      return {};
-    },
-    alignCenter: function alignCenter() {
-      return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
-    },
-    preview: function preview() {
-      var previewSrcList = this.previewSrcList;
-
-      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
-    },
-    imageIndex: function imageIndex() {
-      var previewIndex = 0;
-      var initialIndex = this.initialIndex;
-      if (initialIndex >= 0) {
-        previewIndex = initialIndex;
-        return previewIndex;
-      }
-      var srcIndex = this.previewSrcList.indexOf(this.src);
-      if (srcIndex >= 0) {
-        previewIndex = srcIndex;
-        return previewIndex;
-      }
-      return previewIndex;
-    }
-  },
-
-  watch: {
-    src: function src(val) {
-      this.show && this.loadImage();
-    },
-    show: function show(val) {
-      val && this.loadImage();
-    }
-  },
-
-  mounted: function mounted() {
-    if (this.lazy) {
-      this.addLazyLoadListener();
-    } else {
-      this.loadImage();
-    }
-  },
-  beforeDestroy: function beforeDestroy() {
-    this.lazy && this.removeLazyLoadListener();
-  },
-
-
-  methods: {
-    loadImage: function loadImage() {
-      var _this = this;
-
-      if (this.$isServer) return;
-
-      // reset status
-      this.loading = true;
-      this.error = false;
-
-      var img = new Image();
-      img.onload = function (e) {
-        return _this.handleLoad(e, img);
-      };
-      img.onerror = this.handleError.bind(this);
-
-      // bind html attrs
-      // so it can behave consistently
-      Object.keys(this.$attrs).forEach(function (key) {
-        var value = _this.$attrs[key];
-        img.setAttribute(key, value);
-      });
-      img.src = this.src;
-    },
-    handleLoad: function handleLoad(e, img) {
-      this.imageWidth = img.width;
-      this.imageHeight = img.height;
-      this.loading = false;
-      this.error = false;
-    },
-    handleError: function handleError(e) {
-      this.loading = false;
-      this.error = true;
-      this.$emit('error', e);
-    },
-    handleLazyLoad: function handleLazyLoad() {
-      if (Object(dom_["isInContainer"])(this.$el, this._scrollContainer)) {
-        this.show = true;
-        this.removeLazyLoadListener();
-      }
-    },
-    addLazyLoadListener: function addLazyLoadListener() {
-      if (this.$isServer) return;
-
-      var scrollContainer = this.scrollContainer;
-
-      var _scrollContainer = null;
-
-      if (Object(types_["isHtmlElement"])(scrollContainer)) {
-        _scrollContainer = scrollContainer;
-      } else if (Object(types_["isString"])(scrollContainer)) {
-        _scrollContainer = document.querySelector(scrollContainer);
-      } else {
-        _scrollContainer = Object(dom_["getScrollContainer"])(this.$el);
-      }
-
-      if (_scrollContainer) {
-        this._scrollContainer = _scrollContainer;
-        this._lazyLoadHandler = throttle_default()(200, this.handleLazyLoad);
-        Object(dom_["on"])(_scrollContainer, 'scroll', this._lazyLoadHandler);
-        this.handleLazyLoad();
-      }
-    },
-    removeLazyLoadListener: function removeLazyLoadListener() {
-      var _scrollContainer = this._scrollContainer,
-          _lazyLoadHandler = this._lazyLoadHandler;
-
-
-      if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
-
-      Object(dom_["off"])(_scrollContainer, 'scroll', _lazyLoadHandler);
-      this._scrollContainer = null;
-      this._lazyLoadHandler = null;
-    },
-
-    /**
-     * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
-     */
-    getImageStyle: function getImageStyle(fit) {
-      var imageWidth = this.imageWidth,
-          imageHeight = this.imageHeight;
-      var _$el = this.$el,
-          containerWidth = _$el.clientWidth,
-          containerHeight = _$el.clientHeight;
-
-
-      if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
-
-      var imageAspectRatio = imageWidth / imageHeight;
-      var containerAspectRatio = containerWidth / containerHeight;
-
-      if (fit === ObjectFit.SCALE_DOWN) {
-        var isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
-        fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
-      }
-
-      switch (fit) {
-        case ObjectFit.NONE:
-          return { width: 'auto', height: 'auto' };
-        case ObjectFit.CONTAIN:
-          return imageAspectRatio < containerAspectRatio ? { width: 'auto' } : { height: 'auto' };
-        case ObjectFit.COVER:
-          return imageAspectRatio < containerAspectRatio ? { height: 'auto' } : { width: 'auto' };
-        default:
-          return {};
-      }
-    },
-    clickHandler: function clickHandler() {
-      // don't show viewer when preview is false
-      if (!this.preview) {
-        return;
-      }
-      // prevent body scroll
-      prevOverflow = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-      this.showViewer = true;
-    },
-    closeViewer: function closeViewer() {
-      document.body.style.overflow = prevOverflow;
-      this.showViewer = false;
-    }
-  }
+	name: 'ElImage',
+
+	mixins: [locale_default.a],
+	inheritAttrs: false,
+
+	components: {
+		ImageViewer: image_viewer
+	},
+
+	props: {
+		src: String,
+		fit: String,
+		lazy: Boolean,
+		scrollContainer: {},
+		previewSrcList: {
+			type: Array,
+			default: function _default() {
+				return [];
+			}
+		},
+		zIndex: {
+			type: Number,
+			default: 2000
+		},
+		initialIndex: Number
+	},
+
+	data: function data() {
+		return {
+			loading: true,
+			error: false,
+			show: !this.lazy,
+			imageWidth: 0,
+			imageHeight: 0,
+			showViewer: false
+		};
+	},
+
+
+	computed: {
+		imageStyle: function imageStyle() {
+			var fit = this.fit;
+
+			if (!this.$isServer && fit) {
+				return isSupportObjectFit() ? { 'object-fit': fit } : this.getImageStyle(fit);
+			}
+			return {};
+		},
+		alignCenter: function alignCenter() {
+			return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
+		},
+		preview: function preview() {
+			var previewSrcList = this.previewSrcList;
+
+			return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+		},
+		imageIndex: function imageIndex() {
+			var previewIndex = 0;
+			var initialIndex = this.initialIndex;
+			if (initialIndex >= 0) {
+				previewIndex = initialIndex;
+				return previewIndex;
+			}
+			var srcIndex = this.previewSrcList.indexOf(this.src);
+			if (srcIndex >= 0) {
+				previewIndex = srcIndex;
+				return previewIndex;
+			}
+			return previewIndex;
+		}
+	},
+
+	watch: {
+		src: function src(val) {
+			this.show && this.loadImage();
+		},
+		show: function show(val) {
+			val && this.loadImage();
+		}
+	},
+
+	mounted: function mounted() {
+		if (this.lazy) {
+			this.addLazyLoadListener();
+		} else {
+			this.loadImage();
+		}
+	},
+	beforeDestroy: function beforeDestroy() {
+		this.lazy && this.removeLazyLoadListener();
+	},
+
+
+	methods: {
+		loadImage: function loadImage() {
+			var _this = this;
+
+			if (this.$isServer) return;
+
+			// reset status
+			this.loading = true;
+			this.error = false;
+
+			var img = new Image();
+			img.onload = function (e) {
+				return _this.handleLoad(e, img);
+			};
+			img.onerror = this.handleError.bind(this);
+
+			// bind html attrs
+			// so it can behave consistently
+			Object.keys(this.$attrs).forEach(function (key) {
+				var value = _this.$attrs[key];
+				img.setAttribute(key, value);
+			});
+			img.src = this.src;
+		},
+		handleLoad: function handleLoad(e, img) {
+			this.imageWidth = img.width;
+			this.imageHeight = img.height;
+			this.loading = false;
+			this.error = false;
+		},
+		handleError: function handleError(e) {
+			this.loading = false;
+			this.error = true;
+			this.$emit('error', e);
+		},
+		handleLazyLoad: function handleLazyLoad() {
+			if (Object(dom_["isInContainer"])(this.$el, this._scrollContainer)) {
+				this.show = true;
+				this.removeLazyLoadListener();
+			}
+		},
+		addLazyLoadListener: function addLazyLoadListener() {
+			if (this.$isServer) return;
+
+			var scrollContainer = this.scrollContainer;
+
+			var _scrollContainer = null;
+
+			if (Object(types_["isHtmlElement"])(scrollContainer)) {
+				_scrollContainer = scrollContainer;
+			} else if (Object(types_["isString"])(scrollContainer)) {
+				_scrollContainer = document.querySelector(scrollContainer);
+			} else {
+				_scrollContainer = Object(dom_["getScrollContainer"])(this.$el);
+			}
+
+			if (_scrollContainer) {
+				this._scrollContainer = _scrollContainer;
+				this._lazyLoadHandler = throttle_default()(200, this.handleLazyLoad);
+				Object(dom_["on"])(_scrollContainer, 'scroll', this._lazyLoadHandler);
+				this.handleLazyLoad();
+			}
+		},
+		removeLazyLoadListener: function removeLazyLoadListener() {
+			var _scrollContainer = this._scrollContainer,
+			    _lazyLoadHandler = this._lazyLoadHandler;
+
+
+			if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
+
+			Object(dom_["off"])(_scrollContainer, 'scroll', _lazyLoadHandler);
+			this._scrollContainer = null;
+			this._lazyLoadHandler = null;
+		},
+
+		/**
+       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
+       */
+		getImageStyle: function getImageStyle(fit) {
+			var imageWidth = this.imageWidth,
+			    imageHeight = this.imageHeight;
+			var _$el = this.$el,
+			    containerWidth = _$el.clientWidth,
+			    containerHeight = _$el.clientHeight;
+
+
+			if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
+
+			var imageAspectRatio = imageWidth / imageHeight;
+			var containerAspectRatio = containerWidth / containerHeight;
+
+			if (fit === ObjectFit.SCALE_DOWN) {
+				var isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+				fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+			}
+
+			switch (fit) {
+				case ObjectFit.NONE:
+					return { width: 'auto', height: 'auto' };
+				case ObjectFit.CONTAIN:
+					return imageAspectRatio < containerAspectRatio ? { width: 'auto' } : { height: 'auto' };
+				case ObjectFit.COVER:
+					return imageAspectRatio < containerAspectRatio ? { height: 'auto' } : { width: 'auto' };
+				default:
+					return {};
+			}
+		},
+		clickHandler: function clickHandler() {
+			// don't show viewer when preview is false
+			if (!this.preview) {
+				return;
+			}
+			// prevent body scroll
+			prevOverflow = document.body.style.overflow;
+			document.body.style.overflow = 'hidden';
+			this.showViewer = true;
+		},
+		closeViewer: function closeViewer() {
+			document.body.style.overflow = prevOverflow;
+			this.showViewer = false;
+		}
+	}
 });
 // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=script&lang=js
  /* harmony default export */ var src_mainvue_type_script_lang_js = (mainvue_type_script_lang_js); 
@@ -1128,7 +1128,7 @@ var main_component = Object(componentNormalizer["a" /* default */])(
 
 /* istanbul ignore next */
 main.install = function (Vue) {
-  Vue.component(main.name, main);
+	Vue.component(main.name, main);
 };
 
 /* harmony default export */ var packages_image = __webpack_exports__["default"] = (main);