element-sim 1.0.4 → 1.0.6

package/lib/image.js

@@ -0,0 +1,1138 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 67);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+function normalizeComponent(
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */,
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options =
+    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) {
+    // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          )
+        }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}
+
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports) {
+
+module.exports = require("element-sim/lib/utils/popup");
+
+/***/ }),
+
+/***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("element-sim/lib/utils/types");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("element-sim/lib/utils/dom");
+
+/***/ }),
+
+/***/ 25:
+/***/ (function(module, exports) {
+
+module.exports = require("throttle-debounce/throttle");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("element-sim/lib/utils/util");
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+module.exports = require("element-sim/lib/mixins/locale");
+
+/***/ }),
+
+/***/ 67:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// 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=d2645b64
+var render = function () {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    { staticClass: "el-image" },
+    [
+      _vm.loading
+        ? _vm._t("placeholder", [
+            _c("div", { staticClass: "el-image__placeholder" }),
+          ])
+        : _vm.error
+        ? _vm._t("error", [
+            _c("div", { staticClass: "el-image__error" }, [
+              _vm._v(_vm._s(_vm.t("el.image.error"))),
+            ]),
+          ])
+        : _c(
+            "img",
+            _vm._g(
+              _vm._b(
+                {
+                  staticClass: "el-image__inner",
+                  class: {
+                    "el-image__inner--center": _vm.alignCenter,
+                    "el-image__preview": _vm.preview,
+                  },
+                  style: _vm.imageStyle,
+                  attrs: { src: _vm.src },
+                  on: { click: _vm.clickHandler },
+                },
+                "img",
+                _vm.$attrs,
+                false
+              ),
+              _vm.$listeners
+            )
+          ),
+      _vm.preview
+        ? [
+            _vm.showViewer
+              ? _c("image-viewer", {
+                  attrs: {
+                    "z-index": _vm.zIndex,
+                    "initial-index": _vm.imageIndex,
+                    "on-close": _vm.closeViewer,
+                    "url-list": _vm.previewSrcList,
+                  },
+                })
+              : _vm._e(),
+          ]
+        : _vm._e(),
+    ],
+    2
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+// CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=template&id=d2645b64
+
+// 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=0070614f
+var image_viewervue_type_template_id_0070614f_render = function () {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("transition", { attrs: { name: "viewer-fade" } }, [
+    _c(
+      "div",
+      {
+        ref: "el-image-viewer__wrapper",
+        staticClass: "el-image-viewer__wrapper",
+        style: { "z-index": _vm.viewerZIndex },
+        attrs: { tabindex: "-1" },
+      },
+      [
+        _c("div", {
+          staticClass: "el-image-viewer__mask",
+          on: {
+            click: function ($event) {
+              if ($event.target !== $event.currentTarget) {
+                return null
+              }
+              return _vm.handleMaskClick($event)
+            },
+          },
+        }),
+        _c(
+          "span",
+          {
+            staticClass: "el-image-viewer__btn el-image-viewer__close",
+            on: { click: _vm.hide },
+          },
+          [_c("i", { staticClass: "el-icon-close" })]
+        ),
+        !_vm.isSingle
+          ? [
+              _c(
+                "span",
+                {
+                  staticClass: "el-image-viewer__btn el-image-viewer__prev",
+                  class: { "is-disabled": !_vm.infinite && _vm.isFirst },
+                  on: { click: _vm.prev },
+                },
+                [_c("i", { staticClass: "el-icon-arrow-left" })]
+              ),
+              _c(
+                "span",
+                {
+                  staticClass: "el-image-viewer__btn el-image-viewer__next",
+                  class: { "is-disabled": !_vm.infinite && _vm.isLast },
+                  on: { click: _vm.next },
+                },
+                [_c("i", { staticClass: "el-icon-arrow-right" })]
+              ),
+            ]
+          : _vm._e(),
+        _c(
+          "div",
+          { staticClass: "el-image-viewer__btn el-image-viewer__actions" },
+          [
+            _c("div", { staticClass: "el-image-viewer__actions__inner" }, [
+              _c("i", {
+                staticClass: "el-icon-zoom-out",
+                on: {
+                  click: function ($event) {
+                    _vm.handleActions("zoomOut")
+                  },
+                },
+              }),
+              _c("i", {
+                staticClass: "el-icon-zoom-in",
+                on: {
+                  click: function ($event) {
+                    _vm.handleActions("zoomIn")
+                  },
+                },
+              }),
+              _c("i", { staticClass: "el-image-viewer__actions__divider" }),
+              _c("i", { class: _vm.mode.icon, on: { click: _vm.toggleMode } }),
+              _c("i", { staticClass: "el-image-viewer__actions__divider" }),
+              _c("i", {
+                staticClass: "el-icon-refresh-left",
+                on: {
+                  click: function ($event) {
+                    _vm.handleActions("anticlocelise")
+                  },
+                },
+              }),
+              _c("i", {
+                staticClass: "el-icon-refresh-right",
+                on: {
+                  click: function ($event) {
+                    _vm.handleActions("clocelise")
+                  },
+                },
+              }),
+            ]),
+          ]
+        ),
+        _c(
+          "div",
+          { staticClass: "el-image-viewer__canvas" },
+          _vm._l(_vm.urlList, function (url, i) {
+            return i === _vm.index
+              ? _c("img", {
+                  key: url,
+                  ref: "img",
+                  refInFor: true,
+                  staticClass: "el-image-viewer__img",
+                  style: _vm.imgStyle,
+                  attrs: { src: _vm.currentImg },
+                  on: {
+                    load: _vm.handleImgLoad,
+                    error: _vm.handleImgError,
+                    mousedown: _vm.handleMouseDown,
+                  },
+                })
+              : _vm._e()
+          }),
+          0
+        ),
+      ],
+      2
+    ),
+  ])
+}
+var image_viewervue_type_template_id_0070614f_staticRenderFns = []
+image_viewervue_type_template_id_0070614f_render._withStripped = true
+
+
+// CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=template&id=0070614f
+
+// EXTERNAL MODULE: external "element-sim/lib/utils/dom"
+var dom_ = __webpack_require__(2);
+
+// EXTERNAL MODULE: external "element-sim/lib/utils/util"
+var util_ = __webpack_require__(3);
+
+// EXTERNAL MODULE: external "element-sim/lib/utils/popup"
+var popup_ = __webpack_require__(13);
+
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/image-viewer.vue?vue&type=script&lang=js
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+var Mode = {
+  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);
+    }
+  }
+});
+// 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); 
+// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
+var componentNormalizer = __webpack_require__(0);
+
+// CONCATENATED MODULE: ./packages/image/src/image-viewer.vue
+
+
+
+
+
+/* normalize component */
+
+var component = Object(componentNormalizer["a" /* default */])(
+  src_image_viewervue_type_script_lang_js,
+  image_viewervue_type_template_id_0070614f_render,
+  image_viewervue_type_template_id_0070614f_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var image_viewer = (component.exports);
+// EXTERNAL MODULE: external "element-sim/lib/mixins/locale"
+var locale_ = __webpack_require__(6);
+var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
+
+// EXTERNAL MODULE: external "element-sim/lib/utils/types"
+var types_ = __webpack_require__(17);
+
+// EXTERNAL MODULE: external "throttle-debounce/throttle"
+var throttle_ = __webpack_require__(25);
+var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
+
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/main.vue?vue&type=script&lang=js
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+
+
+var isSupportObjectFit = function isSupportObjectFit() {
+  return document.documentElement.style.objectFit !== undefined;
+};
+
+var ObjectFit = {
+  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;
+    }
+  }
+});
+// 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); 
+// CONCATENATED MODULE: ./packages/image/src/main.vue
+
+
+
+
+
+/* normalize component */
+
+var main_component = Object(componentNormalizer["a" /* default */])(
+  src_mainvue_type_script_lang_js,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var main = (main_component.exports);
+// CONCATENATED MODULE: ./packages/image/index.js
+
+
+/* istanbul ignore next */
+main.install = function (Vue) {
+  Vue.component(main.name, main);
+};
+
+/* harmony default export */ var packages_image = __webpack_exports__["default"] = (main);
+
+/***/ })
+
+/******/ });