ten-design-vue
Version:
ten-vue
913 lines (828 loc) • 29.2 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 3);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("../scripts/utils/dom-helper");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("../icon");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("../config");
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/image-viewer/image-viewer.vue?vue&type=template&id=e8ae4076&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.realVisible || !_vm.destroy)?_c('div',{staticClass:"ten-image-viewer-wrapper"},[_c('transition',{attrs:{"name":"ten-fade-in","appear":""}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],ref:"ten-image-viewer",staticClass:"ten-image-viewer",style:({ 'z-index': _vm.zIndex })},[_c('div',{staticClass:"ten-image-viewer__mask"}),_c('transition',{attrs:{"name":"ten-image-viewer__slide-down"}},[(_vm._isHeaderShow)?_c('div',{staticClass:"ten-image-viewer__header",on:{"mouseenter":_vm.showActionBarsHandler,"mouseout":_vm.hideActionBarsHandler}},[(!_vm.simple)?_c('div',{staticClass:"ten-image-viewer__header-indexes"},[_vm._v("\n "+_vm._s(_vm.index+1)+" "),_c('span',{staticStyle:{"color":"rgba(255,255,255,.6)"}},[_vm._v("/ "+_vm._s(_vm.list.length))])]):_vm._e(),_c('span',{staticClass:"ten-image-viewer__header-close",on:{"click":_vm.closeViewer}},[_c('ten-icon',{attrs:{"icon":"clear"}})],1)]):_vm._e()]),(!_vm._isOnlyOne && !_vm.simple)?[_c('span',{staticClass:"ten-image-viewer__btn ten-image-viewer__btn-prev",class:{ 'ten-image-viewer__btn--disabled': !_vm.infinite && _vm._isFirstIndex },on:{"click":function($event){return _vm.goToPrev()}}},[_c('ten-icon',{attrs:{"icon":"left"}})],1),_c('span',{staticClass:"ten-image-viewer__btn ten-image-viewer__btn-next",class:{ 'ten-image-viewer__btn--disabled': !_vm.infinite && _vm._isLastIndex },on:{"click":function($event){return _vm.goToNext()}}},[_c('ten-icon',{attrs:{"icon":"right"}})],1)]:_vm._e(),_c('transition',{attrs:{"name":"ten-image-viewer__slide-up"}},[(_vm._isFooterShow)?_c('div',{staticClass:"ten-image-viewer__footer",style:(_vm._footerHeightStyle),on:{"mouseenter":_vm.showActionBarsHandler,"mouseout":_vm.hideActionBarsHandler}},[_c('div',{staticClass:"ten-image-viewer__footer-actions"},[_c('span',{staticClass:"ten-image-viewer__action ten-image-viewer__action-zoomin",on:{"click":function($event){return _vm.actionHandler('zoomin')}}},[_c('ten-icon',{attrs:{"icon":"zoom_in"}})],1),_c('span',{staticClass:"ten-image-viewer__action ten-image-viewer__action-zoomout",on:{"click":function($event){return _vm.actionHandler('zoomout')}}},[_c('ten-icon',{attrs:{"icon":"zoom_out"}})],1),_c('span',{staticClass:"ten-image-viewer__action ten-image-viewer__action-scan ten-image-viewer__action--divided",on:{"click":_vm.getOriginalScale}},[_c('ten-icon',{attrs:{"icon":"scan"}}),_vm._v(" "+_vm._s(_vm.t('imageViewer.size'))+"\n ")],1),_c('span',{staticClass:"ten-image-viewer__action ten-image-viewer__action-download"},[_c('a',{attrs:{"href":_vm._currentImg,"target":"_blank","download":""}},[_c('ten-icon',{attrs:{"icon":"download"}}),_vm._v(" "+_vm._s(_vm.t('imageViewer.save')))],1)]),(!_vm.simple)?_c('span',{staticClass:"ten-image-viewer__action ten-image-viewer__action-thumb ten-image-viewer__action--divided",on:{"click":function($event){_vm.isThumbsShow = !_vm.isThumbsShow}}},[_vm._v("\n "+_vm._s(_vm.isThumbsShow ? _vm.t('imageViewer.fold') : _vm.t('imageViewer.expand'))+"\n ")]):_vm._e()]),_c('transition',{attrs:{"name":"ten-image-viewer__slide-down"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isThumbsShow),expression:"isThumbsShow"}],staticClass:"ten-image-viewer__footer-thumbs",style:(_vm._thumbsContainerStyle)},[_c('ul',{style:(_vm._thumbsListStyle)},_vm._l((_vm.list),function(url,i){return _c('li',{key:("thumb-" + i),staticClass:"ten-image-viewer__footer-thumbs-item",class:{'ten-image-viewer__footer-thumbs-item--active': i === _vm.index},style:(_vm._thumbItemStyle),on:{"click":function($event){return _vm.goToIndex(i)}}},[_c('img',{attrs:{"src":url}})])}),0)])])],1):_vm._e()]),_c('transition',{attrs:{"name":"ten-flow-in","appear":""}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],ref:"imgWrapper",staticClass:"ten-image-viewer__image",style:(_vm._imageWrapperStyle)},[_vm._l((_vm.list),function(url,i){return [(i === _vm.index)?_c('img',{key:i,ref:"img",refInFor:true,staticClass:"ten-image-viewer__image-img",style:(_vm._imgStyle),attrs:{"src":_vm._currentImg},on:{"load":_vm.imgLoadedHandler,"error":_vm.imgErrorHandler,"mousedown":_vm.imgMouseDownHandler,"mouseenter":_vm.showActionBarsHandler,"mouseout":_vm.hideActionBarsHandler}}):_vm._e()]})],2)])],2)])],1):_vm._e()}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/components/image-viewer/image-viewer.vue?vue&type=template&id=e8ae4076&
// EXTERNAL MODULE: external "../scripts/utils/dom-helper"
var dom_helper_ = __webpack_require__(0);
var dom_helper_default = /*#__PURE__*/__webpack_require__.n(dom_helper_);
// EXTERNAL MODULE: external "../icon"
var external_icon_ = __webpack_require__(1);
var external_icon_default = /*#__PURE__*/__webpack_require__.n(external_icon_);
// EXTERNAL MODULE: external "../config"
var external_config_ = __webpack_require__(2);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/image-viewer/image-viewer.vue?vue&type=script&lang=js&
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var image_viewervue_type_script_lang_js_name = 'ten-image-viewer';
var prevOverflow = '';
var actionBarsShowTimer = null;
var thumbsSetting = {
containerWidth: 720,
itemWidth: 58,
itemMargin: 8
};
/* harmony default export */ var image_viewervue_type_script_lang_js_ = ({
name: image_viewervue_type_script_lang_js_name,
components: {
TenIcon: external_icon_default.a
},
mixins: [external_config_["localMixin"]],
model: {
prop: 'index',
event: 'change'
},
props: {
/**
* 当前 index 值
* @model index
*/
index: {
type: Number,
default: 0
},
/**
* 初始 index 值
*/
defaultIndex: Number,
/**
* 是否显示，支持 .sync 修饰符，对应事件 update:visible
*/
visible: {
type: Boolean,
default: false
},
/**
* 图片 url 列表
*/
list: {
type: Array,
default: function _default() {
return [];
}
},
/**
* 图片查看器容器 z-index
*/
zIndex: {
type: Number,
default: 1000
},
/**
* 显示底部预览图列表
*/
showPreview: {
type: Boolean,
default: false
},
/**
* 是否为简易预览模式
*/
simple: {
type: Boolean,
default: false
},
/**
* 是否可循环切换 index 值
*/
infinite: {
type: Boolean,
default: false
},
/**
* 关闭时是否销毁
*/
destroy: {
type: Boolean,
default: true
},
/**
* 挂载节点，默认 body
*/
attach: {
type: [String, Function, Element],
default: 'body'
}
},
data: function data() {
return {
loading: false,
realVisible: this.visible,
isThumbsShow: this.showPreview,
showActionBars: false,
transform: {
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: true
}
};
},
computed: {
_isOnlyOne: function _isOnlyOne() {
return this.list.length <= 1;
},
_isFirstIndex: function _isFirstIndex() {
return this.index === 0;
},
_isLastIndex: function _isLastIndex() {
return this.index === this.list.length - 1;
},
_currentImg: function _currentImg() {
return this.list[this.index];
},
_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")
};
return style;
},
_thumbsContainerStyle: function _thumbsContainerStyle() {
return {
width: "".concat(thumbsSetting.containerWidth, "px")
};
},
_thumbItemStyle: function _thumbItemStyle() {
return {
width: "".concat(thumbsSetting.itemWidth, "px"),
marginRight: "".concat(thumbsSetting.itemMargin, "px")
};
},
_thumbsListStyle: function _thumbsListStyle() {
if (!this.showPreview) return;
var index = this.index,
list = this.list;
var containerWidth = thumbsSetting.containerWidth,
itemWidth = thumbsSetting.itemWidth,
itemMargin = thumbsSetting.itemMargin;
var itemCount = list.length;
var maxCount = parseInt(containerWidth / (itemWidth + itemMargin), 10);
var listWidth = itemWidth * itemCount + itemMargin * (itemCount - 1);
var offset;
if (itemCount <= maxCount) {
offset = (containerWidth - listWidth) / 2;
} else {
var leftPos = index * (itemWidth + itemMargin) + itemWidth / 2;
offset = containerWidth / 2 - leftPos;
if (offset > 0) offset = 0;
if (offset < containerWidth - listWidth) offset = containerWidth - listWidth;
}
return {
transform: "translate(".concat(offset, "px, 0)"),
width: "".concat(listWidth, "px")
};
},
_footerHeightStyle: function _footerHeightStyle() {
return {
height: this.isThumbsShow ? '92px' : '48px'
};
},
_imageWrapperStyle: function _imageWrapperStyle() {
return {// bottom: this.isThumbsShow ? '92px' : '48px'
};
},
// 简易模式下 hover 操作显示头部底部
_isHeaderShow: function _isHeaderShow() {
if (!this.simple) return true;
return this.showActionBars;
},
// 简易模式下 hover 操作显示头部底部
_isFooterShow: function _isFooterShow() {
if (!this.simple) return true;
return this.showActionBars;
}
},
watch: {
index: {
handler: function handler() {
this.resetImgTransform();
}
},
_currentImg: function _currentImg() {
var _this = this;
this.$nextTick(function () {
var _this$$refs$img = _slicedToArray(_this.$refs.img, 1),
$img = _this$$refs$img[0];
if (!$img.complete) {
_this.loading = true;
}
});
},
visible: function visible(val) {
var _this2 = this;
if (val) {
this.realVisible = true;
this.appendToDom();
this.$nextTick(function () {
_this2.install();
});
} else {
this.uninstall();
setTimeout(function () {
_this2.realVisible = false;
}, 300);
}
}
},
mounted: function mounted() {
prevOverflow = document.body.style.overflow;
if (this.visible) this.install();
var $imageViewer = this.$refs['ten-image-viewer'];
if ($imageViewer) $imageViewer.focus();
},
beforeDestroy: function beforeDestroy() {
this.uninstall();
},
destroyed: function destroyed() {
try {
this.$el && document.body.removeChild(this.$el);
} catch (e) {}
},
methods: {
appendToDom: function appendToDom() {
if (this.$el) {
var container = null;
if (typeof this.attach === 'function') {
container = this.attach(this.$el.parentNode);
} else if (typeof this.attach === 'string') {
container = document.querySelector(this.attach);
} else {
container = this.attach;
}
if (!container) throw Error('attch must be a valid dom');
container.appendChild(this.$el);
}
},
closeViewer: function closeViewer() {
clearTimeout(actionBarsShowTimer);
/**
* 查看器关闭
*/
this.$emit('close');
/**
* 查看器 visible 变更
* @param {Boolean} visible 显示与否
*/
this.$emit('update:visible', false);
},
// 初始化
install: function install() {
this.setBodyCalcSize();
document.body.style.overflow = 'hidden';
document.addEventListener('keydown', this.keyDownHandler);
var $imgWrapper = this.$refs.imgWrapper;
var wheelEvt = this.getWheelEvt();
if ($imgWrapper) $imgWrapper.addEventListener(wheelEvt, this.mouseWheelHandler); // document.addEventListener(wheelEvt, this.mouseWheelHandler);
},
// 移除事件
uninstall: function uninstall() {
document.body.style.overflow = prevOverflow;
this.setBodyCalcSize(true);
document.removeEventListener('keydown', this.keyDownHandler);
var $imgWrapper = this.$refs.imgWrapper;
var wheelEvt = this.getWheelEvt();
if ($imgWrapper) $imgWrapper.removeEventListener(wheelEvt, this.mouseWheelHandler); // document.removeEventListener(wheelEvt, this.mouseWheelHandler);
},
getWheelEvt: function getWheelEvt() {
var wheelEvt;
if ('onwheel' in document.createElement('div')) {
wheelEvt = 'wheel'; // Modern browsers support "wheel"
} else if (document.onmousewheel !== undefined) {
wheelEvt = 'mousewheel'; // Webkit and IE support at least "mousewheel"
} else {
wheelEvt = 'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox
}
return wheelEvt;
},
imgLoadedHandler: function imgLoadedHandler() {
this.loading = false;
},
imgErrorHandler: function imgErrorHandler(e) {
this.loading = false;
e.target.alt = '加载失败';
},
// 快捷键操作
keyDownHandler: function keyDownHandler(e) {
var keyCode = e.keyCode;
switch (keyCode) {
// ESC
case 27:
this.closeViewer();
break;
// LEFT_ARROW
case 37:
this.goToPrev();
break;
// UP_ARROW
case 38:
this.actionHandler('zoomin');
break;
// RIGHT_ARROW
case 39:
this.goToNext();
break;
// DOWN_ARROW
case 40:
this.actionHandler('zoomout');
break;
}
},
// 滚轮操作
mouseWheelHandler: function mouseWheelHandler(e) {
var delta = -e.deltaY;
if (delta > 0) {
this.actionHandler('zoomin', {
zoomRate: 0.015,
enableTransition: false
});
} else {
this.actionHandler('zoomout', {
zoomRate: 0.015,
enableTransition: false
});
}
},
// 拖拽操作
imgMouseDownHandler: function imgMouseDownHandler(e) {
var _this3 = 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 = function (ev) {
_this3.transform.offsetX = offsetX + ev.pageX - startX;
_this3.transform.offsetY = offsetY + ev.pageY - startY;
};
document.addEventListener('mousemove', this._dragHandler);
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', _this3._dragHandler);
});
e.preventDefault();
},
// 简易模式下 hover 操作
showActionBarsHandler: function showActionBarsHandler() {
if (!this.simple) return false;
clearTimeout(actionBarsShowTimer);
this.showActionBars = true;
},
hideActionBarsHandler: function hideActionBarsHandler() {
var _this4 = this;
if (!this.simple) return false;
clearTimeout(actionBarsShowTimer);
actionBarsShowTimer = setTimeout(function () {
_this4.showActionBars = false;
}, 2500);
},
// 放大缩小操作
actionHandler: function actionHandler(action) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (this.loading) return;
var _zoomRate$enableTrans = _objectSpread({
zoomRate: 0.2,
enableTransition: true
}, options),
zoomRate = _zoomRate$enableTrans.zoomRate,
enableTransition = _zoomRate$enableTrans.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;
default:
break;
}
transform.enableTransition = enableTransition;
},
resetImgTransform: function resetImgTransform() {
this.transform = {
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false
};
},
getOriginalScale: function getOriginalScale() {
if (this.loading) return;
this.resetImgTransform();
},
// 切换操作
goToPrev: function goToPrev() {
if (this._isFirstIndex && !this.infinite) return;
var len = this.list.length;
var index = (this.index - 1 + len) % len;
this.$emit('change', index);
},
goToNext: function goToNext() {
if (this._isLastIndex && !this.infinite) return;
var len = this.list.length;
var index = (this.index + 1) % len;
this.$emit('change', index);
},
goToIndex: function goToIndex(i) {
/**
* 图片 index 值变更
* @param {Number} index 当前 index 值
*/
this.$emit('change', i);
},
setBodyCalcSize: function setBodyCalcSize(clear) {
var bodyIsScroll = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
if (!bodyIsScroll) {
return;
}
if (clear) {
document.body.style.position = '';
document.body.style.width = '';
return;
}
var calcSize = dom_helper_default.a.getBrowserScrollSize();
if (calcSize) {
document.body.style.position = 'relative';
document.body.style.width = "calc(100% - ".concat(calcSize, "px)");
}
}
}
});
// CONCATENATED MODULE: ./src/components/image-viewer/image-viewer.vue?vue&type=script&lang=js&
/* harmony default export */ var image_viewer_image_viewervue_type_script_lang_js_ = (image_viewervue_type_script_lang_js_);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
// CONCATENATED MODULE: ./src/components/image-viewer/image-viewer.vue
/* normalize component */
var component = normalizeComponent(
image_viewer_image_viewervue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var image_viewer = __webpack_exports__["default"] = (component.exports);
/***/ })
/******/ ]);