bk-magic-vue/lib/image.js

基于蓝鲸 Magicbox 和 Vue 的前端组件库

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('bk-magic-vue/lib/locale'), require('vue')) :
  typeof define === 'function' && define.amd ? define(['exports', 'bk-magic-vue/lib/locale', 'vue'], factory) :
  (global = global || self, factory(global.library = {}, global.locale, global.Vue));
}(this, function (exports, locale, Vue) { 'use strict';

  locale = locale && locale.hasOwnProperty('default') ? locale['default'] : locale;
  Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;

  var _defined = function (it) {
    if (it == undefined) throw TypeError("Can't call method on  " + it);
    return it;
  };

  var _toObject = function (it) {
    return Object(_defined(it));
  };

  var hasOwnProperty = {}.hasOwnProperty;
  var _has = function (it, key) {
    return hasOwnProperty.call(it, key);
  };

  var toString$1 = {}.toString;
  var _cof = function (it) {
    return toString$1.call(it).slice(8, -1);
  };

  var _iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
    return _cof(it) == 'String' ? it.split('') : Object(it);
  };

  var _toIobject = function (it) {
    return _iobject(_defined(it));
  };

  var ceil = Math.ceil;
  var floor = Math.floor;
  var _toInteger = function (it) {
    return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
  };

  var min = Math.min;
  var _toLength = function (it) {
    return it > 0 ? min(_toInteger(it), 0x1fffffffffffff) : 0;
  };

  var max = Math.max;
  var min$1 = Math.min;
  var _toAbsoluteIndex = function (index, length) {
    index = _toInteger(index);
    return index < 0 ? max(index + length, 0) : min$1(index, length);
  };

  var _arrayIncludes = function (IS_INCLUDES) {
    return function ($this, el, fromIndex) {
      var O = _toIobject($this);
      var length = _toLength(O.length);
      var index = _toAbsoluteIndex(fromIndex, length);
      var value;
      if (IS_INCLUDES && el != el) while (length > index) {
        value = O[index++];
        if (value != value) return true;
      } else for (;length > index; index++) if (IS_INCLUDES || index in O) {
        if (O[index] === el) return IS_INCLUDES || index || 0;
      } return !IS_INCLUDES && -1;
    };
  };

  function createCommonjsModule(fn, module) {
  	return module = { exports: {} }, fn(module, module.exports), module.exports;
  }

  var _core = createCommonjsModule(function (module) {
  var core = module.exports = { version: '2.6.12' };
  if (typeof __e == 'number') __e = core;
  });
  var _core_1 = _core.version;

  var _global = createCommonjsModule(function (module) {
  var global = module.exports = typeof window != 'undefined' && window.Math == Math
    ? window : typeof self != 'undefined' && self.Math == Math ? self
    : Function('return this')();
  if (typeof __g == 'number') __g = global;
  });

  var _shared = createCommonjsModule(function (module) {
  var SHARED = '__core-js_shared__';
  var store = _global[SHARED] || (_global[SHARED] = {});
  (module.exports = function (key, value) {
    return store[key] || (store[key] = value !== undefined ? value : {});
  })('versions', []).push({
    version: _core.version,
    mode:  'pure' ,
    copyright: '© 2020 Denis Pushkarev (zloirock.ru)'
  });
  });

  var id = 0;
  var px = Math.random();
  var _uid = function (key) {
    return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));
  };

  var shared = _shared('keys');
  var _sharedKey = function (key) {
    return shared[key] || (shared[key] = _uid(key));
  };

  var arrayIndexOf = _arrayIncludes(false);
  var IE_PROTO = _sharedKey('IE_PROTO');
  var _objectKeysInternal = function (object, names) {
    var O = _toIobject(object);
    var i = 0;
    var result = [];
    var key;
    for (key in O) if (key != IE_PROTO) _has(O, key) && result.push(key);
    while (names.length > i) if (_has(O, key = names[i++])) {
      ~arrayIndexOf(result, key) || result.push(key);
    }
    return result;
  };

  var _enumBugKeys = (
    'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'
  ).split(',');

  var _objectKeys = Object.keys || function keys(O) {
    return _objectKeysInternal(O, _enumBugKeys);
  };

  var _aFunction = function (it) {
    if (typeof it != 'function') throw TypeError(it + ' is not a function!');
    return it;
  };

  var _ctx = function (fn, that, length) {
    _aFunction(fn);
    if (that === undefined) return fn;
    switch (length) {
      case 1: return function (a) {
        return fn.call(that, a);
      };
      case 2: return function (a, b) {
        return fn.call(that, a, b);
      };
      case 3: return function (a, b, c) {
        return fn.call(that, a, b, c);
      };
    }
    return function () {
      return fn.apply(that, arguments);
    };
  };

  var _isObject = function (it) {
    return typeof it === 'object' ? it !== null : typeof it === 'function';
  };

  var _anObject = function (it) {
    if (!_isObject(it)) throw TypeError(it + ' is not an object!');
    return it;
  };

  var _fails = function (exec) {
    try {
      return !!exec();
    } catch (e) {
      return true;
    }
  };

  var _descriptors = !_fails(function () {
    return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
  });

  var document$1 = _global.document;
  var is = _isObject(document$1) && _isObject(document$1.createElement);
  var _domCreate = function (it) {
    return is ? document$1.createElement(it) : {};
  };

  var _ie8DomDefine = !_descriptors && !_fails(function () {
    return Object.defineProperty(_domCreate('div'), 'a', { get: function () { return 7; } }).a != 7;
  });

  var _toPrimitive = function (it, S) {
    if (!_isObject(it)) return it;
    var fn, val;
    if (S && typeof (fn = it.toString) == 'function' && !_isObject(val = fn.call(it))) return val;
    if (typeof (fn = it.valueOf) == 'function' && !_isObject(val = fn.call(it))) return val;
    if (!S && typeof (fn = it.toString) == 'function' && !_isObject(val = fn.call(it))) return val;
    throw TypeError("Can't convert object to primitive value");
  };

  var dP = Object.defineProperty;
  var f = _descriptors ? Object.defineProperty : function defineProperty(O, P, Attributes) {
    _anObject(O);
    P = _toPrimitive(P, true);
    _anObject(Attributes);
    if (_ie8DomDefine) try {
      return dP(O, P, Attributes);
    } catch (e) {  }
    if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
    if ('value' in Attributes) O[P] = Attributes.value;
    return O;
  };
  var _objectDp = {
  	f: f
  };

  var _propertyDesc = function (bitmap, value) {
    return {
      enumerable: !(bitmap & 1),
      configurable: !(bitmap & 2),
      writable: !(bitmap & 4),
      value: value
    };
  };

  var _hide = _descriptors ? function (object, key, value) {
    return _objectDp.f(object, key, _propertyDesc(1, value));
  } : function (object, key, value) {
    object[key] = value;
    return object;
  };

  var PROTOTYPE = 'prototype';
  var $export = function (type, name, source) {
    var IS_FORCED = type & $export.F;
    var IS_GLOBAL = type & $export.G;
    var IS_STATIC = type & $export.S;
    var IS_PROTO = type & $export.P;
    var IS_BIND = type & $export.B;
    var IS_WRAP = type & $export.W;
    var exports = IS_GLOBAL ? _core : _core[name] || (_core[name] = {});
    var expProto = exports[PROTOTYPE];
    var target = IS_GLOBAL ? _global : IS_STATIC ? _global[name] : (_global[name] || {})[PROTOTYPE];
    var key, own, out;
    if (IS_GLOBAL) source = name;
    for (key in source) {
      own = !IS_FORCED && target && target[key] !== undefined;
      if (own && _has(exports, key)) continue;
      out = own ? target[key] : source[key];
      exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
      : IS_BIND && own ? _ctx(out, _global)
      : IS_WRAP && target[key] == out ? (function (C) {
        var F = function (a, b, c) {
          if (this instanceof C) {
            switch (arguments.length) {
              case 0: return new C();
              case 1: return new C(a);
              case 2: return new C(a, b);
            } return new C(a, b, c);
          } return C.apply(this, arguments);
        };
        F[PROTOTYPE] = C[PROTOTYPE];
        return F;
      })(out) : IS_PROTO && typeof out == 'function' ? _ctx(Function.call, out) : out;
      if (IS_PROTO) {
        (exports.virtual || (exports.virtual = {}))[key] = out;
        if (type & $export.R && expProto && !expProto[key]) _hide(expProto, key, out);
      }
    }
  };
  $export.F = 1;
  $export.G = 2;
  $export.S = 4;
  $export.P = 8;
  $export.B = 16;
  $export.W = 32;
  $export.U = 64;
  $export.R = 128;
  var _export = $export;

  var _objectSap = function (KEY, exec) {
    var fn = (_core.Object || {})[KEY] || Object[KEY];
    var exp = {};
    exp[KEY] = exec(fn);
    _export(_export.S + _export.F * _fails(function () { fn(1); }), 'Object', exp);
  };

  _objectSap('keys', function () {
    return function keys(it) {
      return _objectKeys(_toObject(it));
    };
  });

  var keys = _core.Object.keys;

  var keys$1 = keys;

  var _isArray = Array.isArray || function isArray(arg) {
    return _cof(arg) == 'Array';
  };

  _export(_export.S, 'Array', { isArray: _isArray });

  var isArray = _core.Array.isArray;

  var isArray$1 = isArray;

  var _stringWs = '\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003' +
    '\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';

  var space = '[' + _stringWs + ']';
  var non = '\u200b\u0085';
  var ltrim = RegExp('^' + space + space + '*');
  var rtrim = RegExp(space + space + '*$');
  var exporter = function (KEY, exec, ALIAS) {
    var exp = {};
    var FORCE = _fails(function () {
      return !!_stringWs[KEY]() || non[KEY]() != non;
    });
    var fn = exp[KEY] = FORCE ? exec(trim) : _stringWs[KEY];
    if (ALIAS) exp[ALIAS] = fn;
    _export(_export.P + _export.F * FORCE, 'String', exp);
  };
  var trim = exporter.trim = function (string, TYPE) {
    string = String(_defined(string));
    if (TYPE & 1) string = string.replace(ltrim, '');
    if (TYPE & 2) string = string.replace(rtrim, '');
    return string;
  };
  var _stringTrim = exporter;

  var $parseFloat = _global.parseFloat;
  var $trim = _stringTrim.trim;
  var _parseFloat = 1 / $parseFloat(_stringWs + '-0') !== -Infinity ? function parseFloat(str) {
    var string = $trim(String(str), 3);
    var result = $parseFloat(string);
    return result === 0 && string.charAt(0) == '-' ? -0 : result;
  } : $parseFloat;

  _export(_export.G + _export.F * (parseFloat != _parseFloat), { parseFloat: _parseFloat });

  var _parseFloat$1 = _core.parseFloat;

  var _parseFloat$2 = _parseFloat$1;

  function _typeof(obj) {
    "@babel/helpers - typeof";

    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
      return typeof obj;
    } : function (obj) {
      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    }, _typeof(obj);
  }
  function _defineProperty(obj, key, value) {
    key = _toPropertyKey(key);
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }
    return obj;
  }
  function _objectSpread(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? Object(arguments[i]) : {};
      var ownKeys = Object.keys(source);
      if (typeof Object.getOwnPropertySymbols === 'function') {
        ownKeys.push.apply(ownKeys, Object.getOwnPropertySymbols(source).filter(function (sym) {
          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
        }));
      }
      ownKeys.forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    }
    return target;
  }
  function _toPrimitive$1(input, hint) {
    if (typeof input !== "object" || input === null) return input;
    var prim = input[Symbol.toPrimitive];
    if (prim !== undefined) {
      var res = prim.call(input, hint || "default");
      if (typeof res !== "object") return res;
      throw new TypeError("@@toPrimitive must return a primitive value.");
    }
    return (hint === "string" ? String : Number)(input);
  }
  function _toPropertyKey(arg) {
    var key = _toPrimitive$1(arg, "string");
    return typeof key === "symbol" ? key : String(key);
  }

  function addEvent(elem, type, handler) {
    if (!elem) {
      return;
    }
    if (elem.addEventListener) {
      elem.addEventListener(type, handler, false);
    } else if (elem.attachEvent) {
      elem.attachEvent('on' + type, handler);
    } else {
      elem['on' + type] = handler;
    }
  }
  function removeEvent(elem, type, handler) {
    if (!elem) {
      return;
    }
    if (elem.removeEventListener) {
      elem.removeEventListener(type, handler, false);
    } else if (elem.detachEvent) {
      elem.detachEvent('on' + type, handler);
    } else {
      elem['on' + type] = null;
    }
  }
  var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
  var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (id) {
    window.clearTimeout(id);
  };
  var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
  var MOZ_HACK_REGEXP = /^moz([A-Z])/;
  var camelCase = function camelCase(name) {
    return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
      return offset ? letter.toUpperCase() : letter;
    }).replace(MOZ_HACK_REGEXP, 'Moz$1');
  };
  var getStyle = Number(document.documentMode) < 9 ? function (element, styleName) {
    if (!element || !styleName) return null;
    styleName = camelCase(styleName);
    if (styleName === 'float') {
      styleName = 'styleFloat';
    }
    try {
      switch (styleName) {
        case 'opacity':
          try {
            return element.filters.item('alpha').opacity / 100;
          } catch (e) {
            return 1.0;
          }
        default:
          return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null;
      }
    } catch (e) {
      return element.style[styleName];
    }
  } : function (element, styleName) {
    if (!element || !styleName) return null;
    styleName = camelCase(styleName);
    if (styleName === 'float') {
      styleName = 'cssFloat';
    }
    try {
      var computed = document.defaultView.getComputedStyle(element, '');
      return element.style[styleName] || computed ? computed[styleName] : null;
    } catch (e) {
      return element.style[styleName];
    }
  };
  var isInContainer = function isInContainer(el, container) {
    if (!el || !container) return false;
    var elRect = el.getBoundingClientRect();
    var containerRect;
    if ([window, document, document.documentElement, null, undefined].includes(container)) {
      containerRect = {
        top: 0,
        right: window.innerWidth,
        bottom: window.innerHeight,
        left: 0
      };
    } else {
      containerRect = container.getBoundingClientRect();
    }
    return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
  };

  _export(_export.S + _export.F * !_descriptors, 'Object', { defineProperty: _objectDp.f });

  var $Object = _core.Object;
  var defineProperty = function defineProperty(it, key, desc) {
    return $Object.defineProperty(it, key, desc);
  };

  var defineProperty$1 = defineProperty;

  var hasInitZIndex = false;
  var zIndex;
  (function () {
    if (!window['__bk_zIndex_manager']) {
      var zIndexManager = {
        nextZIndex: function nextZIndex() {
          var zIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
          return zIndex === 'default' ? zIndexManager.zIndex++ : zIndex;
        },
        nextTickIndex: function nextTickIndex() {
          var tick = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
          var zIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
          if (zIndex === 'default') {
            zIndexManager.zIndex += tick;
            return zIndexManager.zIndex;
          }
          return zIndex;
        }
      };
      defineProperty$1(zIndexManager, 'zIndex', {
        configurable: true,
        get: function get() {
          if (!hasInitZIndex) {
            zIndex = zIndex || (Vue.prototype.$BK_EL || {}).zIndex || 2000;
            hasInitZIndex = true;
          }
          return zIndex;
        },
        set: function set(value) {
          zIndex = value;
        }
      });
      window['__bk_zIndex_manager'] = zIndexManager;
    }
  })();
  var zIndexManager = window['__bk_zIndex_manager'];

  var zIndex$1 = {
    props: {
      zIndex: {
        type: [Number, String],
        default: 'default'
      }
    },
    methods: {
      getLocalZIndex: function getLocalZIndex(zIndex) {
        return zIndexManager.nextTickIndex(2, zIndex);
      }
    }
  };

  function rafThrottle(fn) {
    var locked = false;
    return function () {
      var _this = this;
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      if (locked) return;
      locked = true;
      window.requestAnimationFrame(function (_) {
        fn.apply(_this, args);
        locked = false;
      });
    };
  }
  var script = {
    name: 'bk-image-viewer',
    mixins: [locale.mixin, zIndex$1],
    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() {}
      },
      isShowTitle: {
        type: Boolean,
        default: true
      },
      initialIndex: {
        type: Number,
        default: 0
      },
      maskClose: {
        type: Boolean,
        default: true
      },
      transfer: {
        type: Boolean,
        default: true
      }
    },
    data: function data() {
      return {
        name: '',
        index: this.initialIndex,
        isShow: false,
        infinite: true,
        loading: false,
        error: false,
        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];
      },
      currentName: function currentName() {
        var arr = this.currentImg.split('/');
        return arr[arr.length - 1];
      },
      wrapStyles: function wrapStyles() {
        return {
          zIndex: this.transfer ? this.getLocalZIndex() : this.zIndex
        };
      },
      imgStyle: function imgStyle() {
        var _this$transform = this.transform,
          scale = _this$transform.scale,
          deg = _this$transform.deg,
          offsetX = _this$transform.offsetX,
          offsetY = _this$transform.offsetY,
          enableTransition = _this$transform.enableTransition;
        var style = {
          transform: "scale(".concat(scale, ") rotate(").concat(deg, "deg)"),
          transition: enableTransition ? 'transform .3s' : '',
          'margin-left': "".concat(offsetX, "px"),
          'margin-top': "".concat(offsetY, "px")
        };
        if (this.mode === 'contain') {
          style.maxWidth = style.maxHeight = '100%';
        }
        return style;
      }
    },
    watch: {
      index: {
        handler: function handler(val) {
          this.reset();
          this.onSwitch(val);
          this.$emit('change', val);
        }
      },
      currentImg: function currentImg(val) {
        var _this2 = this;
        this.$nextTick(function (_) {
          var $img = _this2.$refs.img[0];
          if (!$img.complete) {
            _this2.loading = true;
          }
        });
      }
    },
    mounted: function mounted() {
      if (this.transfer) {
        document.body.appendChild(this.$el);
      }
      this.deviceSupportInstall();
      this.$refs['bk-image-viewer-wrapper'].focus();
    },
    destroyed: function destroyed() {
      if (this.transfer && this.$el && this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el);
      }
    },
    methods: {
      hide: function hide() {
        this.deviceSupportUninstall();
        this.onClose();
        this.$emit('hide');
      },
      deviceSupportInstall: function deviceSupportInstall() {
        var _this3 = this;
        this._keyDownHandler = rafThrottle(function (e) {
          var keyCode = e.keyCode;
          switch (keyCode) {
            case 27:
              _this3.hide();
              break;
            case 32:
              _this3.toggleMode();
              break;
            case 37:
              _this3.prev();
              break;
            case 38:
              _this3.handleActions('zoomIn');
              break;
            case 39:
              _this3.next();
              break;
            case 40:
              _this3.handleActions('zoomOut');
              break;
          }
        });
        this._mouseWheelHandler = rafThrottle(function (e) {
          var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
          if (delta > 0) {
            _this3.handleActions('zoomIn', {
              zoomRate: 0.015,
              enableTransition: false
            });
          } else {
            _this3.handleActions('zoomOut', {
              zoomRate: 0.015,
              enableTransition: false
            });
          }
        });
        addEvent(document, 'keydown', this._keyDownHandler);
        addEvent(document, 'mousewheel', this._mouseWheelHandler);
      },
      deviceSupportUninstall: function deviceSupportUninstall() {
        removeEvent(document, 'keydown', this._keyDownHandler);
        removeEvent(document, 'mousewheel', this._mouseWheelHandler);
        this._keyDownHandler = null;
        this._mouseWheelHandler = null;
      },
      handleImgLoad: function handleImgLoad(e) {
        this.loading = false;
        this.error = false;
      },
      handleImgError: function handleImgError(e) {
        this.error = true;
        this.loading = false;
        e.target.alt = '加载失败';
      },
      handleMouseDown: function handleMouseDown(e) {
        var _this4 = this;
        if (this.loading || e.button !== 0) return;
        var _this$transform2 = this.transform,
          offsetX = _this$transform2.offsetX,
          offsetY = _this$transform2.offsetY;
        var startX = e.pageX;
        var startY = e.pageY;
        this._dragHandler = rafThrottle(function (ev) {
          _this4.transform.offsetX = offsetX + ev.pageX - startX;
          _this4.transform.offsetY = offsetY + ev.pageY - startY;
        });
        addEvent(document, 'mousemove', this._dragHandler);
        addEvent(document, 'mouseup', function (ev) {
          removeEvent(document, 'mousemove', _this4._dragHandler);
        });
        e.preventDefault();
      },
      reset: function reset() {
        this.transform = {
          scale: 1,
          deg: 0,
          offsetX: 0,
          offsetY: 0,
          enableTransition: false
        };
      },
      toggleMode: function toggleMode(modeNames) {
        if (this.loading) return;
        this.mode = modeNames;
        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 = _objectSpread({
            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$2((transform.scale - zoomRate).toFixed(3));
            }
            break;
          case 'zoomIn':
            transform.scale = _parseFloat$2((transform.scale + zoomRate).toFixed(3));
            break;
          case 'clockwise':
            transform.deg += rotateDeg;
            break;
          case 'anticlocelise':
            transform.deg -= rotateDeg;
            break;
        }
        transform.enableTransition = enableTransition;
      }
    }
  };

  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
  , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
      createInjectorSSR = createInjector;
      createInjector = shadowMode;
      shadowMode = false;
    }
    var options = typeof script === 'function' ? script.options : script;
    if (template && template.render) {
      options.render = template.render;
      options.staticRenderFns = template.staticRenderFns;
      options._compiled = true;
      if (isFunctionalTemplate) {
        options.functional = true;
      }
    }
    if (scopeId) {
      options._scopeId = scopeId;
    }
    var hook;
    if (moduleIdentifier) {
      hook = function hook(context) {
        context = context ||
        this.$vnode && this.$vnode.ssrContext ||
        this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
        if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
          context = __VUE_SSR_CONTEXT__;
        }
        if (style) {
          style.call(this, createInjectorSSR(context));
        }
        if (context && context._registeredComponents) {
          context._registeredComponents.add(moduleIdentifier);
        }
      };
      options._ssrRegister = hook;
    } else if (style) {
      hook = shadowMode ? function () {
        style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
      } : function (context) {
        style.call(this, createInjector(context));
      };
    }
    if (hook) {
      if (options.functional) {
        var originalRender = options.render;
        options.render = function renderWithStyleInjection(h, context) {
          hook.call(context);
          return originalRender(h, context);
        };
      } else {
        var existing = options.beforeCreate;
        options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
      }
    }
    return script;
  }
  var normalizeComponent_1 = normalizeComponent;

  /* script */
  var __vue_script__ = script;
  /* template */
  var __vue_render__ = function __vue_render__() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c('transition', {
      attrs: {
        "name": "bk-zoom"
      }
    }, [_c('div', {
      ref: "bk-image-viewer-wrapper",
      staticClass: "bk-image-viewer-wrapper",
      style: _vm.wrapStyles,
      attrs: {
        "tabindex": "-1"
      }
    }, [_c('div', {
      staticClass: "bk-image-viewer-mask",
      on: {
        "click": function click($event) {
          _vm.maskClose && _vm.hide();
        }
      }
    }), _vm.isShowTitle && _vm.urlList.length ? _c('div', {
      staticClass: "bk-image-viewer-header"
    }, [_c('div', [_vm._v(_vm._s(_vm.currentName))]), _c('div', {
      staticClass: "tc"
    }, [_vm._v(_vm._s(_vm.index + 1) + "/" + _vm._s(_vm.urlList.length))]), _c('div', {
      staticClass: "quit-box tr"
    }, [_c('div', {
      staticClass: "quit-tips mr10"
    }, [_vm._v(_vm._s(_vm.t('bk.imageViewer.quitTips')))]), _c('div', {
      staticClass: "bk-image-viewer-close",
      on: {
        "click": _vm.hide
      }
    }, [_c('i', {
      staticClass: "bk-icon icon-close"
    })])])]) : _vm._e(), !_vm.isSingle ? [_c('div', {
      staticClass: "bk-image-viewer-btn bk-image-viewer-prev",
      class: {
        'is-disabled': !_vm.infinite && _vm.isFirst
      },
      on: {
        "click": _vm.prev
      }
    }, [_c('i', {
      staticClass: "bk-icon icon-angle-left"
    })]), _c('div', {
      staticClass: "bk-image-viewer-btn bk-image-viewer-next",
      class: {
        'is-disabled': !_vm.infinite && _vm.isLast
      },
      on: {
        "click": _vm.next
      }
    }, [_c('i', {
      staticClass: "bk-icon icon-angle-right"
    })])] : _vm._e(), _c('div', {
      staticClass: "bk-image-viewer-btn bk-image-viewer-actions"
    }, [_c('div', {
      staticClass: "bk-image-viewer-actions-inner"
    }, [_c('i', {
      directives: [{
        name: "bk-tooltips",
        rawName: "v-bk-tooltips.top",
        value: _vm.t('bk.image.zoomOut'),
        expression: "t('bk.image.zoomOut')",
        modifiers: {
          "top": true
        }
      }],
      staticClass: "bk-icon icon-narrow-line",
      on: {
        "click": function click($event) {
          return _vm.handleActions('zoomOut');
        }
      }
    }), _c('i', {
      directives: [{
        name: "bk-tooltips",
        rawName: "v-bk-tooltips.top",
        value: _vm.t('bk.image.zoomIn'),
        expression: "t('bk.image.zoomIn')",
        modifiers: {
          "top": true
        }
      }],
      staticClass: "bk-icon icon-enlarge-line",
      on: {
        "click": function click($event) {
          return _vm.handleActions('zoomIn');
        }
      }
    }), _c('i', {
      directives: [{
        name: "bk-tooltips",
        rawName: "v-bk-tooltips.top",
        value: _vm.t('bk.image.original'),
        expression: "t('bk.image.original')",
        modifiers: {
          "top": true
        }
      }],
      staticClass: "bk-icon icon-normalized",
      on: {
        "click": function click($event) {
          return _vm.toggleMode('original');
        }
      }
    }), _c('i', {
      directives: [{
        name: "bk-tooltips",
        rawName: "v-bk-tooltips.top",
        value: _vm.t('bk.image.rotateLeft'),
        expression: "t('bk.image.rotateLeft')",
        modifiers: {
          "top": true
        }
      }],
      staticClass: "bk-icon icon-left-turn-line",
      on: {
        "click": function click($event) {
          return _vm.handleActions('anticlocelise');
        }
      }
    }), _c('i', {
      directives: [{
        name: "bk-tooltips",
        rawName: "v-bk-tooltips.top",
        value: _vm.t('bk.image.rotateRight'),
        expression: "t('bk.image.rotateRight')",
        modifiers: {
          "top": true
        }
      }],
      staticClass: "bk-icon icon-right-turn-line",
      on: {
        "click": function click($event) {
          return _vm.handleActions('clockwise');
        }
      }
    }), _c('i', {
      directives: [{
        name: "bk-tooltips",
        rawName: "v-bk-tooltips.top",
        value: _vm.t('bk.image.fullScreen'),
        expression: "t('bk.image.fullScreen')",
        modifiers: {
          "top": true
        }
      }],
      staticClass: "bk-icon icon-unfull-screen",
      on: {
        "click": function click($event) {
          return _vm.toggleMode('contain');
        }
      }
    })])]), _c('div', {
      staticClass: "bk-image-viewer-canvas",
      class: {
        'bk-image-viewer-has-header': _vm.isShowTitle
      }
    }, [_vm.error ? _c('div', {
      staticClass: "bk-image-viewer-error"
    }, [_c('div', [_c('i', {
      staticClass: "bk-icon icon-image-fail"
    })]), _c('div', [_vm._v(_vm._s(_vm.t('bk.imageViewer.loadFailed')))])]) : _vm._e(), _vm._l(_vm.urlList, function (url, i) {
      return i === _vm.index ? _c('img', {
        directives: [{
          name: "show",
          rawName: "v-show",
          value: !_vm.error,
          expression: "!error"
        }],
        key: url,
        ref: "img",
        refInFor: true,
        staticClass: "bk-image-viewer-img",
        style: _vm.imgStyle,
        attrs: {
          "src": _vm.currentImg
        },
        on: {
          "load": _vm.handleImgLoad,
          "error": _vm.handleImgError,
          "mousedown": _vm.handleMouseDown
        }
      }) : _vm._e();
    })], 2)], 2)]);
  };
  var __vue_staticRenderFns__ = [];

  /* style */
  var __vue_inject_styles__ = undefined;
  /* scoped */
  var __vue_scope_id__ = undefined;
  /* module identifier */
  var __vue_module_identifier__ = undefined;
  /* functional template */
  var __vue_is_functional_template__ = false;
  /* style inject */

  /* style inject SSR */

  /* style inject shadow dom */

  var __vue_component__ = /*#__PURE__*/normalizeComponent_1({
    render: __vue_render__,
    staticRenderFns: __vue_staticRenderFns__
  }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

  function setInstaller (component, afterInstall) {
    component.install = function (Vue) {
      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var props = component.props || {};
      keys$1(options).forEach(function (key) {
        if (props.hasOwnProperty(key)) {
          if (typeof props[key] === 'function' || props[key] instanceof Array) {
            props[key] = {
              type: props[key],
              default: options[key]
            };
          } else {
            props[key].default = options[key];
          }
        }
      });
      component.name = options.namespace ? component.name.replace('bk', options.namespace) : component.name;
      Vue.component(component.name, component);
      typeof afterInstall === 'function' && afterInstall(Vue, options);
    };
  }

  setInstaller(__vue_component__);

  var $parseInt = _global.parseInt;
  var $trim$1 = _stringTrim.trim;
  var hex = /^[-+]?0[xX]/;
  var _parseInt = $parseInt(_stringWs + '08') !== 8 || $parseInt(_stringWs + '0x16') !== 22 ? function parseInt(str, radix) {
    var string = $trim$1(String(str), 3);
    return $parseInt(string, (radix >>> 0) || (hex.test(string) ? 16 : 10));
  } : $parseInt;

  _export(_export.G + _export.F * (parseInt != _parseInt), { parseInt: _parseInt });

  var _parseInt$1 = _core.parseInt;

  var requestAnimationFrame$1 = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
  var cancelAnimationFrame$1 = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (id) {
    window.clearTimeout(id);
  };
  function getTag(value) {
    if (value === null) {
      return '[object Null]';
    }
    return toString.call(value);
  }
  function isString(value) {
    var type = _typeof(value);
    return type === 'string' || type === 'object' && value !== null && getTag(value) === '[object String]';
  }
  function isHtmlElement(node) {
    return node && node.nodeType === Node.ELEMENT_NODE;
  }

  function throttle (delay, noTrailing, callback, debounceMode) {
    var timeoutID;
    var cancelled = false;
    var lastExec = 0;
    function clearExistingTimeout() {
      if (timeoutID) {
        clearTimeout(timeoutID);
      }
    }
    function cancel() {
      clearExistingTimeout();
      cancelled = true;
    }
    if (typeof noTrailing !== 'boolean') {
      debounceMode = callback;
      callback = noTrailing;
      noTrailing = undefined;
    }
    function wrapper() {
      var self = this;
      var elapsed = Date.now() - lastExec;
      var args = arguments;
      if (cancelled) {
        return;
      }
      function exec() {
        lastExec = Date.now();
        callback.apply(self, args);
      }
      function clear() {
        timeoutID = undefined;
      }
      if (debounceMode && !timeoutID) {
        exec();
      }
      clearExistingTimeout();
      if (debounceMode === undefined && elapsed > delay) {
        exec();
      } else if (noTrailing !== true) {
        timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
      }
    }
    wrapper.cancel = cancel;
    return wrapper;
  }

  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 script$1 = {
    name: 'bk-image',
    components: {
      bkImageViewer: __vue_component__
    },
    mixins: [locale.mixin],
    props: {
      src: String,
      fallback: String,
      fit: String,
      lazy: Boolean,
      scrollContainer: {
        type: Object,
        default: function _default() {
          return {};
        }
      },
      previewSrcList: {
        type: Array,
        default: function _default() {
          return [];
        }
      },
      isShowPreviewTitle: {
        type: Boolean,
        default: true
      },
      maskClose: {
        type: Boolean,
        default: true
      },
      zIndex: {
        type: Number,
        default: 2000
      },
      transfer: {
        type: Boolean,
        default: true
      }
    },
    data: function data() {
      return {
        loading: true,
        error: false,
        show: !this.lazy,
        imageWidth: 0,
        imageHeight: 0,
        showViewer: false,
        prevOverflow: ''
      };
    },
    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 isArray$1(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;
        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);
        keys$1(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 (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 (isHtmlElement(scrollContainer)) {
          _scrollContainer = scrollContainer;
        } else if (isString(scrollContainer)) {
          _scrollContainer = document.querySelector(scrollContainer);
        } else {
          if ([window, document, document.documentElement].includes(this.$el)) {
            _scrollContainer = window;
          } else {
            _scrollContainer = this.$el.parentNode;
          }
        }
        if (_scrollContainer) {
          this._scrollContainer = _scrollContainer;
          this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
          addEvent(_scrollContainer, 'scroll', this._lazyLoadHandler);
          this.handleLazyLoad();
        }
      },
      removeLazyLoadListener: function removeLazyLoadListener() {
        var _scrollContainer = this._scrollContainer,
          _lazyLoadHandler = this._lazyLoadHandler;
        if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
        removeEvent(_scrollContainer, 'scroll', _lazyLoadHandler);
        this._scrollContainer = null;
        this._lazyLoadHandler = null;
      },
      getImageStyle: function getImageStyle(fit) {
        var imageWidth = this.imageWidth,
          imageHeight = this.imageHeight;
        var _this$$el = this.$el,
          containerWidth = _this$$el.clientWidth,
          containerHeight = _this$$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() {
        if (!this.preview) {
          return;
        }
        this.prevOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        this.showViewer = true;
      },
      closeViewer: function closeViewer() {
        document.body.style.overflow = this.prevOverflow;
        this.showViewer = false;
      }
    }
  };

  /* script */
  var __vue_script__$1 = script$1;
  /* template */
  var __vue_render__$1 = function __vue_render__() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c('div', {
      staticClass: "bk-image"
    }, [_vm.loading ? _vm._t("placeholder", function () {
      return [_vm._m(0)];
    }) : _vm.error ? _vm._t("error", function () {
      return [_c('div', {
        staticClass: "bk-image-placeholder"
      }, [_vm.fallback ? _c('img', {
        attrs: {
          "src": _vm.fallback
        }
      }) : _c('i', {
        staticClass: "bk-icon icon-image-fail"
      })])];
    }) : _c('img', _vm._g(_vm._b({
      staticClass: "bk-image-inner",
      class: {
        'bk-image-inner-center': _vm.alignCenter,
        'bk-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('bk-image-viewer', {
      attrs: {
        "z-index": _vm.zIndex,
        "is-show-title": _vm.isShowPreviewTitle,
        "initial-index": _vm.imageIndex,
        "url-list": _vm.previewSrcList,
        "on-close": _vm.closeViewer,
        "transfer": _vm.transfer,
        "mask-close": _vm.maskClose
      }
    }) : _vm._e()] : _vm._e()], 2);
  };
  var __vue_staticRenderFns__$1 = [function () {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c('div', {
      staticClass: "bk-image-placeholder"
    }, [_c('i', {
      staticClass: "bk-icon icon-image"
    })]);
  }];

  /* style */
  var __vue_inject_styles__$1 = undefined;
  /* scoped */
  var __vue_scope_id__$1 = undefined;
  /* module identifier */
  var __vue_module_identifier__$1 = undefined;
  /* functional template */
  var __vue_is_functional_template__$1 = false;
  /* style inject */

  /* style inject SSR */

  /* style inject shadow dom */

  var __vue_component__$1 = /*#__PURE__*/normalizeComponent_1({
    render: __vue_render__$1,
    staticRenderFns: __vue_staticRenderFns__$1
  }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);

  setInstaller(__vue_component__$1);

  exports.default = __vue_component__$1;

  Object.defineProperty(exports, '__esModule', { value: true });

}));