@cw-devops/bk-magic-vue/lib/image-viewer.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;

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

	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 _core = createCommonjsModule(function (module) {
	var core = module.exports = { version: '2.6.12' };
	if (typeof __e == 'number') __e = core;
	});
	var _core_1 = _core.version;

	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 hasOwnProperty = {}.hasOwnProperty;
	var _has = function (it, key) {
	  return hasOwnProperty.call(it, key);
	};

	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 _defined = function (it) {
	  if (it == undefined) throw TypeError("Can't call method on  " + it);
	  return it;
	};

	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 _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];
	  }
	};

	_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) {
	        _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) {
	        _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) {
	        _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) {
	        _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) {
	        _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) {
	        _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);

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

	var toString = {}.toString;
	var _cof = function (it) {
	  return toString.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;
	  };
	};

	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 _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;

	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__);

	exports.default = __vue_component__;

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

}));