lh-chs-ui/lib/image.js

A Component Library for Vue.js.

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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 === 'undefined' ? 'undefined' : _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 = 64);
  /******/
}(
/************************************************************************/
/******/{

  /***/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 hook(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, 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 functioal 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
      };
    }

    /***/
  },

  /***/2:
  /***/function _(module, exports) {

    module.exports = require('lh-chs-ui/lib/utils/dom');

    /***/
  },

  /***/20:
  /***/function _(module, exports) {

    module.exports = require('lh-chs-ui/lib/utils/types');

    /***/
  },

  /***/25:
  /***/function _(module, exports) {

    module.exports = require('throttle-debounce/throttle');

    /***/
  },

  /***/3:
  /***/function _(module, exports) {

    module.exports = require('lh-chs-ui/lib/utils/util');

    /***/
  },

  /***/6:
  /***/function _(module, exports) {

    module.exports = require('lh-chs-ui/lib/mixins/locale');

    /***/
  },

  /***/64:
  /***/function _(module, __webpack_exports__, __webpack_require__) {

    "use strict";

    __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=44d84a7c&
    var render = function render() {
      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=44d84a7c&

    // 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=5e73b307&
    var image_viewervue_type_template_id_5e73b307_render = function image_viewervue_type_template_id_5e73b307_render() {
      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.zIndex },
        attrs: { tabindex: "-1" }
      }, [_c("div", { staticClass: "el-image-viewer__mask" }), _c("span", {
        staticClass: "el-image-viewer__btn el-image-viewer__close",
        on: { click: _vm.hide }
      }, [_c("i", { staticClass: "el-icon-circle-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 click($event) {
            _vm.handleActions("zoomOut");
          }
        }
      }), _c("i", {
        staticClass: "el-icon-zoom-in",
        on: {
          click: function click($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 click($event) {
            _vm.handleActions("anticlocelise");
          }
        }
      }), _c("i", {
        staticClass: "el-icon-refresh-right",
        on: {
          click: function click($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_5e73b307_staticRenderFns = [];
    image_viewervue_type_template_id_5e73b307_render._withStripped = true;

    // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=template&id=5e73b307&

    // EXTERNAL MODULE: external "element-ui/lib/utils/dom"
    var dom_ = __webpack_require__(2);

    // EXTERNAL MODULE: external "element-ui/lib/utils/util"
    var util_ = __webpack_require__(3);

    // 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
        }
      },

      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;
        }
      },
      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 = Object(util_["rafThrottle"])(function (e) {
            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();
        },
        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();
        // 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();
      }
    };
    // 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_5e73b307_render, image_viewervue_type_template_id_5e73b307_staticRenderFns, false, null, null, null);

    /* hot reload */
    if (false) {
      var api;
    }
    component.options.__file = "packages/image/src/image-viewer.vue";
    /* harmony default export */var image_viewer = component.exports;
    // EXTERNAL MODULE: external "element-ui/lib/mixins/locale"
    var locale_ = __webpack_require__(6);
    var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);

    // EXTERNAL MODULE: external "element-ui/lib/utils/types"
    var types_ = __webpack_require__(20);

    // 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
        }
      },

      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 srcIndex = this.previewSrcList.indexOf(this.src);
          if (srcIndex >= 0) {
            previewIndex = srcIndex;
          }
          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 vertical = imageWidth / imageHeight < 1;

          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 vertical ? { width: 'auto' } : { height: 'auto' };
            case ObjectFit.COVER:
              return vertical ? { 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);

    /* hot reload */
    if (false) {
      var main_api;
    }
    main_component.options.__file = "packages/image/src/main.vue";
    /* 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;

    /***/
  }

  /******/ });