12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133 |
- module.exports =
- /******/ (function(modules) { // webpackBootstrap
- /******/ // The module cache
- /******/ var installedModules = {};
- /******/
- /******/ // The require function
- /******/ function __webpack_require__(moduleId) {
- /******/
- /******/ // Check if module is in cache
- /******/ if(installedModules[moduleId]) {
- /******/ return installedModules[moduleId].exports;
- /******/ }
- /******/ // Create a new module (and put it into the cache)
- /******/ var module = installedModules[moduleId] = {
- /******/ i: moduleId,
- /******/ l: false,
- /******/ exports: {}
- /******/ };
- /******/
- /******/ // Execute the module function
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
- /******/
- /******/ // Flag the module as loaded
- /******/ module.l = true;
- /******/
- /******/ // Return the exports of the module
- /******/ return module.exports;
- /******/ }
- /******/
- /******/
- /******/ // expose the modules object (__webpack_modules__)
- /******/ __webpack_require__.m = modules;
- /******/
- /******/ // expose the module cache
- /******/ __webpack_require__.c = installedModules;
- /******/
- /******/ // define getter function for harmony exports
- /******/ __webpack_require__.d = function(exports, name, getter) {
- /******/ if(!__webpack_require__.o(exports, name)) {
- /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
- /******/ }
- /******/ };
- /******/
- /******/ // define __esModule on exports
- /******/ __webpack_require__.r = function(exports) {
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
- /******/ }
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
- /******/ };
- /******/
- /******/ // create a fake namespace object
- /******/ // mode & 1: value is a module id, require it
- /******/ // mode & 2: merge all properties of value into the ns
- /******/ // mode & 4: return value when already ns object
- /******/ // mode & 8|1: behave like require
- /******/ __webpack_require__.t = function(value, mode) {
- /******/ if(mode & 1) value = __webpack_require__(value);
- /******/ if(mode & 8) return value;
- /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
- /******/ var ns = Object.create(null);
- /******/ __webpack_require__.r(ns);
- /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
- /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
- /******/ return ns;
- /******/ };
- /******/
- /******/ // getDefaultExport function for compatibility with non-harmony modules
- /******/ __webpack_require__.n = function(module) {
- /******/ var getter = module && module.__esModule ?
- /******/ function getDefault() { return module['default']; } :
- /******/ function getModuleExports() { return module; };
- /******/ __webpack_require__.d(getter, 'a', getter);
- /******/ return getter;
- /******/ };
- /******/
- /******/ // Object.prototype.hasOwnProperty.call
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
- /******/
- /******/ // __webpack_public_path__
- /******/ __webpack_require__.p = "/dist/";
- /******/
- /******/
- /******/ // Load entry module and return exports
- /******/ return __webpack_require__(__webpack_require__.s = 66);
- /******/ })
- /************************************************************************/
- /******/ ({
- /***/ 0:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
- /* globals __VUE_SSR_CONTEXT__ */
- // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
- // This module is a runtime utility for cleaner component module output and will
- // be included in the final webpack user bundle.
- function normalizeComponent (
- scriptExports,
- render,
- staticRenderFns,
- functionalTemplate,
- injectStyles,
- scopeId,
- moduleIdentifier, /* server only */
- shadowMode /* vue-cli only */
- ) {
- // Vue.extend constructor export interop
- var options = typeof scriptExports === 'function'
- ? scriptExports.options
- : scriptExports
- // render functions
- if (render) {
- options.render = render
- options.staticRenderFns = staticRenderFns
- options._compiled = true
- }
- // functional template
- if (functionalTemplate) {
- options.functional = true
- }
- // scopedId
- if (scopeId) {
- options._scopeId = 'data-v-' + scopeId
- }
- var hook
- if (moduleIdentifier) { // server build
- hook = function (context) {
- // 2.3 injection
- context =
- context || // cached call
- (this.$vnode && this.$vnode.ssrContext) || // stateful
- (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
- // 2.2 with runInNewContext: true
- if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
- context = __VUE_SSR_CONTEXT__
- }
- // inject component styles
- if (injectStyles) {
- injectStyles.call(this, context)
- }
- // register component module identifier for async chunk inferrence
- if (context && context._registeredComponents) {
- context._registeredComponents.add(moduleIdentifier)
- }
- }
- // used by ssr in case component is cached and beforeCreate
- // never gets called
- options._ssrRegister = hook
- } else if (injectStyles) {
- hook = shadowMode
- ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
- : injectStyles
- }
- if (hook) {
- if (options.functional) {
- // for template-only hot-reload because in that case the render fn doesn't
- // go through the normalizer
- options._injectStyles = hook
- // register for functioal component in vue file
- var originalRender = options.render
- options.render = function renderWithStyleInjection (h, context) {
- hook.call(context)
- return originalRender(h, context)
- }
- } else {
- // inject component registration as beforeCreate hook
- var existing = options.beforeCreate
- options.beforeCreate = existing
- ? [].concat(existing, hook)
- : [hook]
- }
- }
- return {
- exports: scriptExports,
- options: options
- }
- }
- /***/ }),
- /***/ 13:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/utils/popup");
- /***/ }),
- /***/ 17:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/utils/types");
- /***/ }),
- /***/ 2:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/utils/dom");
- /***/ }),
- /***/ 25:
- /***/ (function(module, exports) {
- module.exports = require("throttle-debounce/throttle");
- /***/ }),
- /***/ 3:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/utils/util");
- /***/ }),
- /***/ 6:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/mixins/locale");
- /***/ }),
- /***/ 66:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- __webpack_require__.r(__webpack_exports__);
- // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/main.vue?vue&type=template&id=44d84a7c&
- var render = function() {
- var _vm = this
- var _h = _vm.$createElement
- var _c = _vm._self._c || _h
- return _c(
- "div",
- { staticClass: "el-image" },
- [
- _vm.loading
- ? _vm._t("placeholder", [
- _c("div", { staticClass: "el-image__placeholder" })
- ])
- : _vm.error
- ? _vm._t("error", [
- _c("div", { staticClass: "el-image__error" }, [
- _vm._v(_vm._s(_vm.t("el.image.error")))
- ])
- ])
- : _c(
- "img",
- _vm._g(
- _vm._b(
- {
- staticClass: "el-image__inner",
- class: {
- "el-image__inner--center": _vm.alignCenter,
- "el-image__preview": _vm.preview
- },
- style: _vm.imageStyle,
- attrs: { src: _vm.src },
- on: { click: _vm.clickHandler }
- },
- "img",
- _vm.$attrs,
- false
- ),
- _vm.$listeners
- )
- ),
- _vm.preview
- ? [
- _vm.showViewer
- ? _c("image-viewer", {
- attrs: {
- "z-index": _vm.zIndex,
- "initial-index": _vm.imageIndex,
- "on-close": _vm.closeViewer,
- "url-list": _vm.previewSrcList
- }
- })
- : _vm._e()
- ]
- : _vm._e()
- ],
- 2
- )
- }
- var staticRenderFns = []
- render._withStripped = true
- // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=template&id=44d84a7c&
- // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/image-viewer.vue?vue&type=template&id=5e73b307&
- var image_viewervue_type_template_id_5e73b307_render = function() {
- var _vm = this
- var _h = _vm.$createElement
- var _c = _vm._self._c || _h
- return _c("transition", { attrs: { name: "viewer-fade" } }, [
- _c(
- "div",
- {
- ref: "el-image-viewer__wrapper",
- staticClass: "el-image-viewer__wrapper",
- style: { "z-index": _vm.viewerZIndex },
- attrs: { tabindex: "-1" }
- },
- [
- _c("div", {
- staticClass: "el-image-viewer__mask",
- on: {
- click: function($event) {
- if ($event.target !== $event.currentTarget) {
- return null
- }
- return _vm.handleMaskClick($event)
- }
- }
- }),
- _c(
- "span",
- {
- staticClass: "el-image-viewer__btn el-image-viewer__close",
- on: { click: _vm.hide }
- },
- [_c("i", { staticClass: "el-icon-close" })]
- ),
- !_vm.isSingle
- ? [
- _c(
- "span",
- {
- staticClass: "el-image-viewer__btn el-image-viewer__prev",
- class: { "is-disabled": !_vm.infinite && _vm.isFirst },
- on: { click: _vm.prev }
- },
- [_c("i", { staticClass: "el-icon-arrow-left" })]
- ),
- _c(
- "span",
- {
- staticClass: "el-image-viewer__btn el-image-viewer__next",
- class: { "is-disabled": !_vm.infinite && _vm.isLast },
- on: { click: _vm.next }
- },
- [_c("i", { staticClass: "el-icon-arrow-right" })]
- )
- ]
- : _vm._e(),
- _c(
- "div",
- { staticClass: "el-image-viewer__btn el-image-viewer__actions" },
- [
- _c("div", { staticClass: "el-image-viewer__actions__inner" }, [
- _c("i", {
- staticClass: "el-icon-zoom-out",
- on: {
- click: function($event) {
- _vm.handleActions("zoomOut")
- }
- }
- }),
- _c("i", {
- staticClass: "el-icon-zoom-in",
- on: {
- click: function($event) {
- _vm.handleActions("zoomIn")
- }
- }
- }),
- _c("i", { staticClass: "el-image-viewer__actions__divider" }),
- _c("i", { class: _vm.mode.icon, on: { click: _vm.toggleMode } }),
- _c("i", { staticClass: "el-image-viewer__actions__divider" }),
- _c("i", {
- staticClass: "el-icon-refresh-left",
- on: {
- click: function($event) {
- _vm.handleActions("anticlocelise")
- }
- }
- }),
- _c("i", {
- staticClass: "el-icon-refresh-right",
- on: {
- click: function($event) {
- _vm.handleActions("clocelise")
- }
- }
- })
- ])
- ]
- ),
- _c(
- "div",
- { staticClass: "el-image-viewer__canvas" },
- _vm._l(_vm.urlList, function(url, i) {
- return i === _vm.index
- ? _c("img", {
- key: url,
- ref: "img",
- refInFor: true,
- staticClass: "el-image-viewer__img",
- style: _vm.imgStyle,
- attrs: { src: _vm.currentImg },
- on: {
- load: _vm.handleImgLoad,
- error: _vm.handleImgError,
- mousedown: _vm.handleMouseDown
- }
- })
- : _vm._e()
- }),
- 0
- )
- ],
- 2
- )
- ])
- }
- var image_viewervue_type_template_id_5e73b307_staticRenderFns = []
- image_viewervue_type_template_id_5e73b307_render._withStripped = true
- // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=template&id=5e73b307&
- // EXTERNAL MODULE: external "element-ui/lib/utils/dom"
- var dom_ = __webpack_require__(2);
- // EXTERNAL MODULE: external "element-ui/lib/utils/util"
- var util_ = __webpack_require__(3);
- // EXTERNAL MODULE: external "element-ui/lib/utils/popup"
- var popup_ = __webpack_require__(13);
- // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/image-viewer.vue?vue&type=script&lang=js&
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- var Mode = {
- CONTAIN: {
- name: 'contain',
- icon: 'el-icon-full-screen'
- },
- ORIGINAL: {
- name: 'original',
- icon: 'el-icon-c-scale-to-original'
- }
- };
- var mousewheelEventName = Object(util_["isFirefox"])() ? 'DOMMouseScroll' : 'mousewheel';
- /* harmony default export */ var image_viewervue_type_script_lang_js_ = ({
- name: 'elImageViewer',
- props: {
- urlList: {
- type: Array,
- default: function _default() {
- return [];
- }
- },
- zIndex: {
- type: Number,
- default: 2000
- },
- onSwitch: {
- type: Function,
- default: function _default() {}
- },
- onClose: {
- type: Function,
- default: function _default() {}
- },
- initialIndex: {
- type: Number,
- default: 0
- },
- appendToBody: {
- type: Boolean,
- default: true
- },
- maskClosable: {
- type: Boolean,
- default: true
- }
- },
- data: function data() {
- return {
- index: this.initialIndex,
- isShow: false,
- infinite: true,
- loading: false,
- mode: Mode.CONTAIN,
- transform: {
- scale: 1,
- deg: 0,
- offsetX: 0,
- offsetY: 0,
- enableTransition: false
- }
- };
- },
- computed: {
- isSingle: function isSingle() {
- return this.urlList.length <= 1;
- },
- isFirst: function isFirst() {
- return this.index === 0;
- },
- isLast: function isLast() {
- return this.index === this.urlList.length - 1;
- },
- currentImg: function currentImg() {
- return this.urlList[this.index];
- },
- imgStyle: function imgStyle() {
- var _transform = this.transform,
- scale = _transform.scale,
- deg = _transform.deg,
- offsetX = _transform.offsetX,
- offsetY = _transform.offsetY,
- enableTransition = _transform.enableTransition;
- var style = {
- transform: 'scale(' + scale + ') rotate(' + deg + 'deg)',
- transition: enableTransition ? 'transform .3s' : '',
- 'margin-left': offsetX + 'px',
- 'margin-top': offsetY + 'px'
- };
- if (this.mode === Mode.CONTAIN) {
- style.maxWidth = style.maxHeight = '100%';
- }
- return style;
- },
- viewerZIndex: function viewerZIndex() {
- var nextZIndex = popup_["PopupManager"].nextZIndex();
- return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
- }
- },
- watch: {
- index: {
- handler: function handler(val) {
- this.reset();
- this.onSwitch(val);
- }
- },
- currentImg: function currentImg(val) {
- var _this = this;
- this.$nextTick(function (_) {
- var $img = _this.$refs.img[0];
- if (!$img.complete) {
- _this.loading = true;
- }
- });
- }
- },
- methods: {
- hide: function hide() {
- this.deviceSupportUninstall();
- this.onClose();
- },
- deviceSupportInstall: function deviceSupportInstall() {
- var _this2 = this;
- this._keyDownHandler = function (e) {
- e.stopPropagation();
- var keyCode = e.keyCode;
- switch (keyCode) {
- // ESC
- case 27:
- _this2.hide();
- break;
- // SPACE
- case 32:
- _this2.toggleMode();
- break;
- // LEFT_ARROW
- case 37:
- _this2.prev();
- break;
- // UP_ARROW
- case 38:
- _this2.handleActions('zoomIn');
- break;
- // RIGHT_ARROW
- case 39:
- _this2.next();
- break;
- // DOWN_ARROW
- case 40:
- _this2.handleActions('zoomOut');
- break;
- }
- };
- this._mouseWheelHandler = Object(util_["rafThrottle"])(function (e) {
- var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
- if (delta > 0) {
- _this2.handleActions('zoomIn', {
- zoomRate: 0.015,
- enableTransition: false
- });
- } else {
- _this2.handleActions('zoomOut', {
- zoomRate: 0.015,
- enableTransition: false
- });
- }
- });
- Object(dom_["on"])(document, 'keydown', this._keyDownHandler);
- Object(dom_["on"])(document, mousewheelEventName, this._mouseWheelHandler);
- },
- deviceSupportUninstall: function deviceSupportUninstall() {
- Object(dom_["off"])(document, 'keydown', this._keyDownHandler);
- Object(dom_["off"])(document, mousewheelEventName, this._mouseWheelHandler);
- this._keyDownHandler = null;
- this._mouseWheelHandler = null;
- },
- handleImgLoad: function handleImgLoad(e) {
- this.loading = false;
- },
- handleImgError: function handleImgError(e) {
- this.loading = false;
- e.target.alt = '加载失败';
- },
- handleMouseDown: function handleMouseDown(e) {
- var _this3 = this;
- if (this.loading || e.button !== 0) return;
- var _transform2 = this.transform,
- offsetX = _transform2.offsetX,
- offsetY = _transform2.offsetY;
- var startX = e.pageX;
- var startY = e.pageY;
- this._dragHandler = Object(util_["rafThrottle"])(function (ev) {
- _this3.transform.offsetX = offsetX + ev.pageX - startX;
- _this3.transform.offsetY = offsetY + ev.pageY - startY;
- });
- Object(dom_["on"])(document, 'mousemove', this._dragHandler);
- Object(dom_["on"])(document, 'mouseup', function (ev) {
- Object(dom_["off"])(document, 'mousemove', _this3._dragHandler);
- });
- e.preventDefault();
- },
- handleMaskClick: function handleMaskClick() {
- if (this.maskClosable) {
- this.hide();
- }
- },
- reset: function reset() {
- this.transform = {
- scale: 1,
- deg: 0,
- offsetX: 0,
- offsetY: 0,
- enableTransition: false
- };
- },
- toggleMode: function toggleMode() {
- if (this.loading) return;
- var modeNames = Object.keys(Mode);
- var modeValues = Object.values(Mode);
- var index = modeValues.indexOf(this.mode);
- var nextIndex = (index + 1) % modeNames.length;
- this.mode = Mode[modeNames[nextIndex]];
- this.reset();
- },
- prev: function prev() {
- if (this.isFirst && !this.infinite) return;
- var len = this.urlList.length;
- this.index = (this.index - 1 + len) % len;
- },
- next: function next() {
- if (this.isLast && !this.infinite) return;
- var len = this.urlList.length;
- this.index = (this.index + 1) % len;
- },
- handleActions: function handleActions(action) {
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
- if (this.loading) return;
- var _zoomRate$rotateDeg$e = _extends({
- zoomRate: 0.2,
- rotateDeg: 90,
- enableTransition: true
- }, options),
- zoomRate = _zoomRate$rotateDeg$e.zoomRate,
- rotateDeg = _zoomRate$rotateDeg$e.rotateDeg,
- enableTransition = _zoomRate$rotateDeg$e.enableTransition;
- var transform = this.transform;
- switch (action) {
- case 'zoomOut':
- if (transform.scale > 0.2) {
- transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
- }
- break;
- case 'zoomIn':
- transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
- break;
- case 'clocelise':
- transform.deg += rotateDeg;
- break;
- case 'anticlocelise':
- transform.deg -= rotateDeg;
- break;
- }
- transform.enableTransition = enableTransition;
- }
- },
- mounted: function mounted() {
- this.deviceSupportInstall();
- if (this.appendToBody) {
- document.body.appendChild(this.$el);
- }
- // add tabindex then wrapper can be focusable via Javascript
- // focus wrapper so arrow key can't cause inner scroll behavior underneath
- this.$refs['el-image-viewer__wrapper'].focus();
- },
- destroyed: function destroyed() {
- // if appendToBody is true, remove DOM node after destroy
- if (this.appendToBody && this.$el && this.$el.parentNode) {
- this.$el.parentNode.removeChild(this.$el);
- }
- }
- });
- // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=script&lang=js&
- /* harmony default export */ var src_image_viewervue_type_script_lang_js_ = (image_viewervue_type_script_lang_js_);
- // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
- var componentNormalizer = __webpack_require__(0);
- // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue
- /* normalize component */
- var component = Object(componentNormalizer["a" /* default */])(
- src_image_viewervue_type_script_lang_js_,
- image_viewervue_type_template_id_5e73b307_render,
- image_viewervue_type_template_id_5e73b307_staticRenderFns,
- false,
- null,
- null,
- null
-
- )
- /* hot reload */
- if (false) { var api; }
- component.options.__file = "packages/image/src/image-viewer.vue"
- /* harmony default export */ var image_viewer = (component.exports);
- // EXTERNAL MODULE: external "element-ui/lib/mixins/locale"
- var locale_ = __webpack_require__(6);
- var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
- // EXTERNAL MODULE: external "element-ui/lib/utils/types"
- var types_ = __webpack_require__(17);
- // EXTERNAL MODULE: external "throttle-debounce/throttle"
- var throttle_ = __webpack_require__(25);
- var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
- // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/image/src/main.vue?vue&type=script&lang=js&
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- var isSupportObjectFit = function isSupportObjectFit() {
- return document.documentElement.style.objectFit !== undefined;
- };
- var ObjectFit = {
- NONE: 'none',
- CONTAIN: 'contain',
- COVER: 'cover',
- FILL: 'fill',
- SCALE_DOWN: 'scale-down'
- };
- var prevOverflow = '';
- /* harmony default export */ var mainvue_type_script_lang_js_ = ({
- name: 'ElImage',
- mixins: [locale_default.a],
- inheritAttrs: false,
- components: {
- ImageViewer: image_viewer
- },
- props: {
- src: String,
- fit: String,
- lazy: Boolean,
- scrollContainer: {},
- previewSrcList: {
- type: Array,
- default: function _default() {
- return [];
- }
- },
- zIndex: {
- type: Number,
- default: 2000
- }
- },
- data: function data() {
- return {
- loading: true,
- error: false,
- show: !this.lazy,
- imageWidth: 0,
- imageHeight: 0,
- showViewer: false
- };
- },
- computed: {
- imageStyle: function imageStyle() {
- var fit = this.fit;
- if (!this.$isServer && fit) {
- return isSupportObjectFit() ? { 'object-fit': fit } : this.getImageStyle(fit);
- }
- return {};
- },
- alignCenter: function alignCenter() {
- return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
- },
- preview: function preview() {
- var previewSrcList = this.previewSrcList;
- return Array.isArray(previewSrcList) && previewSrcList.length > 0;
- },
- imageIndex: function imageIndex() {
- var previewIndex = 0;
- var srcIndex = this.previewSrcList.indexOf(this.src);
- if (srcIndex >= 0) {
- previewIndex = srcIndex;
- }
- return previewIndex;
- }
- },
- watch: {
- src: function src(val) {
- this.show && this.loadImage();
- },
- show: function show(val) {
- val && this.loadImage();
- }
- },
- mounted: function mounted() {
- if (this.lazy) {
- this.addLazyLoadListener();
- } else {
- this.loadImage();
- }
- },
- beforeDestroy: function beforeDestroy() {
- this.lazy && this.removeLazyLoadListener();
- },
- methods: {
- loadImage: function loadImage() {
- var _this = this;
- if (this.$isServer) return;
- // reset status
- this.loading = true;
- this.error = false;
- var img = new Image();
- img.onload = function (e) {
- return _this.handleLoad(e, img);
- };
- img.onerror = this.handleError.bind(this);
- // bind html attrs
- // so it can behave consistently
- Object.keys(this.$attrs).forEach(function (key) {
- var value = _this.$attrs[key];
- img.setAttribute(key, value);
- });
- img.src = this.src;
- },
- handleLoad: function handleLoad(e, img) {
- this.imageWidth = img.width;
- this.imageHeight = img.height;
- this.loading = false;
- this.error = false;
- },
- handleError: function handleError(e) {
- this.loading = false;
- this.error = true;
- this.$emit('error', e);
- },
- handleLazyLoad: function handleLazyLoad() {
- if (Object(dom_["isInContainer"])(this.$el, this._scrollContainer)) {
- this.show = true;
- this.removeLazyLoadListener();
- }
- },
- addLazyLoadListener: function addLazyLoadListener() {
- if (this.$isServer) return;
- var scrollContainer = this.scrollContainer;
- var _scrollContainer = null;
- if (Object(types_["isHtmlElement"])(scrollContainer)) {
- _scrollContainer = scrollContainer;
- } else if (Object(types_["isString"])(scrollContainer)) {
- _scrollContainer = document.querySelector(scrollContainer);
- } else {
- _scrollContainer = Object(dom_["getScrollContainer"])(this.$el);
- }
- if (_scrollContainer) {
- this._scrollContainer = _scrollContainer;
- this._lazyLoadHandler = throttle_default()(200, this.handleLazyLoad);
- Object(dom_["on"])(_scrollContainer, 'scroll', this._lazyLoadHandler);
- this.handleLazyLoad();
- }
- },
- removeLazyLoadListener: function removeLazyLoadListener() {
- var _scrollContainer = this._scrollContainer,
- _lazyLoadHandler = this._lazyLoadHandler;
- if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
- Object(dom_["off"])(_scrollContainer, 'scroll', _lazyLoadHandler);
- this._scrollContainer = null;
- this._lazyLoadHandler = null;
- },
- /**
- * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
- */
- getImageStyle: function getImageStyle(fit) {
- var imageWidth = this.imageWidth,
- imageHeight = this.imageHeight;
- var _$el = this.$el,
- containerWidth = _$el.clientWidth,
- containerHeight = _$el.clientHeight;
- if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
- var imageAspectRatio = imageWidth / imageHeight;
- var containerAspectRatio = containerWidth / containerHeight;
- if (fit === ObjectFit.SCALE_DOWN) {
- var isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
- fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
- }
- switch (fit) {
- case ObjectFit.NONE:
- return { width: 'auto', height: 'auto' };
- case ObjectFit.CONTAIN:
- return imageAspectRatio < containerAspectRatio ? { width: 'auto' } : { height: 'auto' };
- case ObjectFit.COVER:
- return imageAspectRatio < containerAspectRatio ? { height: 'auto' } : { width: 'auto' };
- default:
- return {};
- }
- },
- clickHandler: function clickHandler() {
- // don't show viewer when preview is false
- if (!this.preview) {
- return;
- }
- // prevent body scroll
- prevOverflow = document.body.style.overflow;
- document.body.style.overflow = 'hidden';
- this.showViewer = true;
- },
- closeViewer: function closeViewer() {
- document.body.style.overflow = prevOverflow;
- this.showViewer = false;
- }
- }
- });
- // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=script&lang=js&
- /* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_);
- // CONCATENATED MODULE: ./packages/image/src/main.vue
- /* normalize component */
- var main_component = Object(componentNormalizer["a" /* default */])(
- src_mainvue_type_script_lang_js_,
- render,
- staticRenderFns,
- false,
- null,
- null,
- null
-
- )
- /* hot reload */
- if (false) { var main_api; }
- main_component.options.__file = "packages/image/src/main.vue"
- /* harmony default export */ var main = (main_component.exports);
- // CONCATENATED MODULE: ./packages/image/index.js
- /* istanbul ignore next */
- main.install = function (Vue) {
- Vue.component(main.name, main);
- };
- /* harmony default export */ var packages_image = __webpack_exports__["default"] = (main);
- /***/ })
- /******/ });
|