image.js 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  41. /******/ }
  42. /******/ };
  43. /******/
  44. /******/ // define __esModule on exports
  45. /******/ __webpack_require__.r = function(exports) {
  46. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  48. /******/ }
  49. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  50. /******/ };
  51. /******/
  52. /******/ // create a fake namespace object
  53. /******/ // mode & 1: value is a module id, require it
  54. /******/ // mode & 2: merge all properties of value into the ns
  55. /******/ // mode & 4: return value when already ns object
  56. /******/ // mode & 8|1: behave like require
  57. /******/ __webpack_require__.t = function(value, mode) {
  58. /******/ if(mode & 1) value = __webpack_require__(value);
  59. /******/ if(mode & 8) return value;
  60. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  61. /******/ var ns = Object.create(null);
  62. /******/ __webpack_require__.r(ns);
  63. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  64. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  65. /******/ return ns;
  66. /******/ };
  67. /******/
  68. /******/ // getDefaultExport function for compatibility with non-harmony modules
  69. /******/ __webpack_require__.n = function(module) {
  70. /******/ var getter = module && module.__esModule ?
  71. /******/ function getDefault() { return module['default']; } :
  72. /******/ function getModuleExports() { return module; };
  73. /******/ __webpack_require__.d(getter, 'a', getter);
  74. /******/ return getter;
  75. /******/ };
  76. /******/
  77. /******/ // Object.prototype.hasOwnProperty.call
  78. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  79. /******/
  80. /******/ // __webpack_public_path__
  81. /******/ __webpack_require__.p = "/dist/";
  82. /******/
  83. /******/
  84. /******/ // Load entry module and return exports
  85. /******/ return __webpack_require__(__webpack_require__.s = 66);
  86. /******/ })
  87. /************************************************************************/
  88. /******/ ({
  89. /***/ 0:
  90. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  91. "use strict";
  92. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
  93. /* globals __VUE_SSR_CONTEXT__ */
  94. // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
  95. // This module is a runtime utility for cleaner component module output and will
  96. // be included in the final webpack user bundle.
  97. function normalizeComponent (
  98. scriptExports,
  99. render,
  100. staticRenderFns,
  101. functionalTemplate,
  102. injectStyles,
  103. scopeId,
  104. moduleIdentifier, /* server only */
  105. shadowMode /* vue-cli only */
  106. ) {
  107. // Vue.extend constructor export interop
  108. var options = typeof scriptExports === 'function'
  109. ? scriptExports.options
  110. : scriptExports
  111. // render functions
  112. if (render) {
  113. options.render = render
  114. options.staticRenderFns = staticRenderFns
  115. options._compiled = true
  116. }
  117. // functional template
  118. if (functionalTemplate) {
  119. options.functional = true
  120. }
  121. // scopedId
  122. if (scopeId) {
  123. options._scopeId = 'data-v-' + scopeId
  124. }
  125. var hook
  126. if (moduleIdentifier) { // server build
  127. hook = function (context) {
  128. // 2.3 injection
  129. context =
  130. context || // cached call
  131. (this.$vnode && this.$vnode.ssrContext) || // stateful
  132. (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
  133. // 2.2 with runInNewContext: true
  134. if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
  135. context = __VUE_SSR_CONTEXT__
  136. }
  137. // inject component styles
  138. if (injectStyles) {
  139. injectStyles.call(this, context)
  140. }
  141. // register component module identifier for async chunk inferrence
  142. if (context && context._registeredComponents) {
  143. context._registeredComponents.add(moduleIdentifier)
  144. }
  145. }
  146. // used by ssr in case component is cached and beforeCreate
  147. // never gets called
  148. options._ssrRegister = hook
  149. } else if (injectStyles) {
  150. hook = shadowMode
  151. ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
  152. : injectStyles
  153. }
  154. if (hook) {
  155. if (options.functional) {
  156. // for template-only hot-reload because in that case the render fn doesn't
  157. // go through the normalizer
  158. options._injectStyles = hook
  159. // register for functioal component in vue file
  160. var originalRender = options.render
  161. options.render = function renderWithStyleInjection (h, context) {
  162. hook.call(context)
  163. return originalRender(h, context)
  164. }
  165. } else {
  166. // inject component registration as beforeCreate hook
  167. var existing = options.beforeCreate
  168. options.beforeCreate = existing
  169. ? [].concat(existing, hook)
  170. : [hook]
  171. }
  172. }
  173. return {
  174. exports: scriptExports,
  175. options: options
  176. }
  177. }
  178. /***/ }),
  179. /***/ 13:
  180. /***/ (function(module, exports) {
  181. module.exports = require("element-ui/lib/utils/popup");
  182. /***/ }),
  183. /***/ 17:
  184. /***/ (function(module, exports) {
  185. module.exports = require("element-ui/lib/utils/types");
  186. /***/ }),
  187. /***/ 2:
  188. /***/ (function(module, exports) {
  189. module.exports = require("element-ui/lib/utils/dom");
  190. /***/ }),
  191. /***/ 25:
  192. /***/ (function(module, exports) {
  193. module.exports = require("throttle-debounce/throttle");
  194. /***/ }),
  195. /***/ 3:
  196. /***/ (function(module, exports) {
  197. module.exports = require("element-ui/lib/utils/util");
  198. /***/ }),
  199. /***/ 6:
  200. /***/ (function(module, exports) {
  201. module.exports = require("element-ui/lib/mixins/locale");
  202. /***/ }),
  203. /***/ 66:
  204. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  205. "use strict";
  206. __webpack_require__.r(__webpack_exports__);
  207. // 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&
  208. var render = function() {
  209. var _vm = this
  210. var _h = _vm.$createElement
  211. var _c = _vm._self._c || _h
  212. return _c(
  213. "div",
  214. { staticClass: "el-image" },
  215. [
  216. _vm.loading
  217. ? _vm._t("placeholder", [
  218. _c("div", { staticClass: "el-image__placeholder" })
  219. ])
  220. : _vm.error
  221. ? _vm._t("error", [
  222. _c("div", { staticClass: "el-image__error" }, [
  223. _vm._v(_vm._s(_vm.t("el.image.error")))
  224. ])
  225. ])
  226. : _c(
  227. "img",
  228. _vm._g(
  229. _vm._b(
  230. {
  231. staticClass: "el-image__inner",
  232. class: {
  233. "el-image__inner--center": _vm.alignCenter,
  234. "el-image__preview": _vm.preview
  235. },
  236. style: _vm.imageStyle,
  237. attrs: { src: _vm.src },
  238. on: { click: _vm.clickHandler }
  239. },
  240. "img",
  241. _vm.$attrs,
  242. false
  243. ),
  244. _vm.$listeners
  245. )
  246. ),
  247. _vm.preview
  248. ? [
  249. _vm.showViewer
  250. ? _c("image-viewer", {
  251. attrs: {
  252. "z-index": _vm.zIndex,
  253. "initial-index": _vm.imageIndex,
  254. "on-close": _vm.closeViewer,
  255. "url-list": _vm.previewSrcList
  256. }
  257. })
  258. : _vm._e()
  259. ]
  260. : _vm._e()
  261. ],
  262. 2
  263. )
  264. }
  265. var staticRenderFns = []
  266. render._withStripped = true
  267. // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=template&id=44d84a7c&
  268. // 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&
  269. var image_viewervue_type_template_id_5e73b307_render = function() {
  270. var _vm = this
  271. var _h = _vm.$createElement
  272. var _c = _vm._self._c || _h
  273. return _c("transition", { attrs: { name: "viewer-fade" } }, [
  274. _c(
  275. "div",
  276. {
  277. ref: "el-image-viewer__wrapper",
  278. staticClass: "el-image-viewer__wrapper",
  279. style: { "z-index": _vm.viewerZIndex },
  280. attrs: { tabindex: "-1" }
  281. },
  282. [
  283. _c("div", {
  284. staticClass: "el-image-viewer__mask",
  285. on: {
  286. click: function($event) {
  287. if ($event.target !== $event.currentTarget) {
  288. return null
  289. }
  290. return _vm.handleMaskClick($event)
  291. }
  292. }
  293. }),
  294. _c(
  295. "span",
  296. {
  297. staticClass: "el-image-viewer__btn el-image-viewer__close",
  298. on: { click: _vm.hide }
  299. },
  300. [_c("i", { staticClass: "el-icon-close" })]
  301. ),
  302. !_vm.isSingle
  303. ? [
  304. _c(
  305. "span",
  306. {
  307. staticClass: "el-image-viewer__btn el-image-viewer__prev",
  308. class: { "is-disabled": !_vm.infinite && _vm.isFirst },
  309. on: { click: _vm.prev }
  310. },
  311. [_c("i", { staticClass: "el-icon-arrow-left" })]
  312. ),
  313. _c(
  314. "span",
  315. {
  316. staticClass: "el-image-viewer__btn el-image-viewer__next",
  317. class: { "is-disabled": !_vm.infinite && _vm.isLast },
  318. on: { click: _vm.next }
  319. },
  320. [_c("i", { staticClass: "el-icon-arrow-right" })]
  321. )
  322. ]
  323. : _vm._e(),
  324. _c(
  325. "div",
  326. { staticClass: "el-image-viewer__btn el-image-viewer__actions" },
  327. [
  328. _c("div", { staticClass: "el-image-viewer__actions__inner" }, [
  329. _c("i", {
  330. staticClass: "el-icon-zoom-out",
  331. on: {
  332. click: function($event) {
  333. _vm.handleActions("zoomOut")
  334. }
  335. }
  336. }),
  337. _c("i", {
  338. staticClass: "el-icon-zoom-in",
  339. on: {
  340. click: function($event) {
  341. _vm.handleActions("zoomIn")
  342. }
  343. }
  344. }),
  345. _c("i", { staticClass: "el-image-viewer__actions__divider" }),
  346. _c("i", { class: _vm.mode.icon, on: { click: _vm.toggleMode } }),
  347. _c("i", { staticClass: "el-image-viewer__actions__divider" }),
  348. _c("i", {
  349. staticClass: "el-icon-refresh-left",
  350. on: {
  351. click: function($event) {
  352. _vm.handleActions("anticlocelise")
  353. }
  354. }
  355. }),
  356. _c("i", {
  357. staticClass: "el-icon-refresh-right",
  358. on: {
  359. click: function($event) {
  360. _vm.handleActions("clocelise")
  361. }
  362. }
  363. })
  364. ])
  365. ]
  366. ),
  367. _c(
  368. "div",
  369. { staticClass: "el-image-viewer__canvas" },
  370. _vm._l(_vm.urlList, function(url, i) {
  371. return i === _vm.index
  372. ? _c("img", {
  373. key: url,
  374. ref: "img",
  375. refInFor: true,
  376. staticClass: "el-image-viewer__img",
  377. style: _vm.imgStyle,
  378. attrs: { src: _vm.currentImg },
  379. on: {
  380. load: _vm.handleImgLoad,
  381. error: _vm.handleImgError,
  382. mousedown: _vm.handleMouseDown
  383. }
  384. })
  385. : _vm._e()
  386. }),
  387. 0
  388. )
  389. ],
  390. 2
  391. )
  392. ])
  393. }
  394. var image_viewervue_type_template_id_5e73b307_staticRenderFns = []
  395. image_viewervue_type_template_id_5e73b307_render._withStripped = true
  396. // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=template&id=5e73b307&
  397. // EXTERNAL MODULE: external "element-ui/lib/utils/dom"
  398. var dom_ = __webpack_require__(2);
  399. // EXTERNAL MODULE: external "element-ui/lib/utils/util"
  400. var util_ = __webpack_require__(3);
  401. // EXTERNAL MODULE: external "element-ui/lib/utils/popup"
  402. var popup_ = __webpack_require__(13);
  403. // 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&
  404. 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; };
  405. //
  406. //
  407. //
  408. //
  409. //
  410. //
  411. //
  412. //
  413. //
  414. //
  415. //
  416. //
  417. //
  418. //
  419. //
  420. //
  421. //
  422. //
  423. //
  424. //
  425. //
  426. //
  427. //
  428. //
  429. //
  430. //
  431. //
  432. //
  433. //
  434. //
  435. //
  436. //
  437. //
  438. //
  439. //
  440. //
  441. //
  442. //
  443. //
  444. //
  445. //
  446. //
  447. //
  448. //
  449. //
  450. //
  451. //
  452. //
  453. //
  454. //
  455. //
  456. //
  457. //
  458. var Mode = {
  459. CONTAIN: {
  460. name: 'contain',
  461. icon: 'el-icon-full-screen'
  462. },
  463. ORIGINAL: {
  464. name: 'original',
  465. icon: 'el-icon-c-scale-to-original'
  466. }
  467. };
  468. var mousewheelEventName = Object(util_["isFirefox"])() ? 'DOMMouseScroll' : 'mousewheel';
  469. /* harmony default export */ var image_viewervue_type_script_lang_js_ = ({
  470. name: 'elImageViewer',
  471. props: {
  472. urlList: {
  473. type: Array,
  474. default: function _default() {
  475. return [];
  476. }
  477. },
  478. zIndex: {
  479. type: Number,
  480. default: 2000
  481. },
  482. onSwitch: {
  483. type: Function,
  484. default: function _default() {}
  485. },
  486. onClose: {
  487. type: Function,
  488. default: function _default() {}
  489. },
  490. initialIndex: {
  491. type: Number,
  492. default: 0
  493. },
  494. appendToBody: {
  495. type: Boolean,
  496. default: true
  497. },
  498. maskClosable: {
  499. type: Boolean,
  500. default: true
  501. }
  502. },
  503. data: function data() {
  504. return {
  505. index: this.initialIndex,
  506. isShow: false,
  507. infinite: true,
  508. loading: false,
  509. mode: Mode.CONTAIN,
  510. transform: {
  511. scale: 1,
  512. deg: 0,
  513. offsetX: 0,
  514. offsetY: 0,
  515. enableTransition: false
  516. }
  517. };
  518. },
  519. computed: {
  520. isSingle: function isSingle() {
  521. return this.urlList.length <= 1;
  522. },
  523. isFirst: function isFirst() {
  524. return this.index === 0;
  525. },
  526. isLast: function isLast() {
  527. return this.index === this.urlList.length - 1;
  528. },
  529. currentImg: function currentImg() {
  530. return this.urlList[this.index];
  531. },
  532. imgStyle: function imgStyle() {
  533. var _transform = this.transform,
  534. scale = _transform.scale,
  535. deg = _transform.deg,
  536. offsetX = _transform.offsetX,
  537. offsetY = _transform.offsetY,
  538. enableTransition = _transform.enableTransition;
  539. var style = {
  540. transform: 'scale(' + scale + ') rotate(' + deg + 'deg)',
  541. transition: enableTransition ? 'transform .3s' : '',
  542. 'margin-left': offsetX + 'px',
  543. 'margin-top': offsetY + 'px'
  544. };
  545. if (this.mode === Mode.CONTAIN) {
  546. style.maxWidth = style.maxHeight = '100%';
  547. }
  548. return style;
  549. },
  550. viewerZIndex: function viewerZIndex() {
  551. var nextZIndex = popup_["PopupManager"].nextZIndex();
  552. return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
  553. }
  554. },
  555. watch: {
  556. index: {
  557. handler: function handler(val) {
  558. this.reset();
  559. this.onSwitch(val);
  560. }
  561. },
  562. currentImg: function currentImg(val) {
  563. var _this = this;
  564. this.$nextTick(function (_) {
  565. var $img = _this.$refs.img[0];
  566. if (!$img.complete) {
  567. _this.loading = true;
  568. }
  569. });
  570. }
  571. },
  572. methods: {
  573. hide: function hide() {
  574. this.deviceSupportUninstall();
  575. this.onClose();
  576. },
  577. deviceSupportInstall: function deviceSupportInstall() {
  578. var _this2 = this;
  579. this._keyDownHandler = function (e) {
  580. e.stopPropagation();
  581. var keyCode = e.keyCode;
  582. switch (keyCode) {
  583. // ESC
  584. case 27:
  585. _this2.hide();
  586. break;
  587. // SPACE
  588. case 32:
  589. _this2.toggleMode();
  590. break;
  591. // LEFT_ARROW
  592. case 37:
  593. _this2.prev();
  594. break;
  595. // UP_ARROW
  596. case 38:
  597. _this2.handleActions('zoomIn');
  598. break;
  599. // RIGHT_ARROW
  600. case 39:
  601. _this2.next();
  602. break;
  603. // DOWN_ARROW
  604. case 40:
  605. _this2.handleActions('zoomOut');
  606. break;
  607. }
  608. };
  609. this._mouseWheelHandler = Object(util_["rafThrottle"])(function (e) {
  610. var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
  611. if (delta > 0) {
  612. _this2.handleActions('zoomIn', {
  613. zoomRate: 0.015,
  614. enableTransition: false
  615. });
  616. } else {
  617. _this2.handleActions('zoomOut', {
  618. zoomRate: 0.015,
  619. enableTransition: false
  620. });
  621. }
  622. });
  623. Object(dom_["on"])(document, 'keydown', this._keyDownHandler);
  624. Object(dom_["on"])(document, mousewheelEventName, this._mouseWheelHandler);
  625. },
  626. deviceSupportUninstall: function deviceSupportUninstall() {
  627. Object(dom_["off"])(document, 'keydown', this._keyDownHandler);
  628. Object(dom_["off"])(document, mousewheelEventName, this._mouseWheelHandler);
  629. this._keyDownHandler = null;
  630. this._mouseWheelHandler = null;
  631. },
  632. handleImgLoad: function handleImgLoad(e) {
  633. this.loading = false;
  634. },
  635. handleImgError: function handleImgError(e) {
  636. this.loading = false;
  637. e.target.alt = '加载失败';
  638. },
  639. handleMouseDown: function handleMouseDown(e) {
  640. var _this3 = this;
  641. if (this.loading || e.button !== 0) return;
  642. var _transform2 = this.transform,
  643. offsetX = _transform2.offsetX,
  644. offsetY = _transform2.offsetY;
  645. var startX = e.pageX;
  646. var startY = e.pageY;
  647. this._dragHandler = Object(util_["rafThrottle"])(function (ev) {
  648. _this3.transform.offsetX = offsetX + ev.pageX - startX;
  649. _this3.transform.offsetY = offsetY + ev.pageY - startY;
  650. });
  651. Object(dom_["on"])(document, 'mousemove', this._dragHandler);
  652. Object(dom_["on"])(document, 'mouseup', function (ev) {
  653. Object(dom_["off"])(document, 'mousemove', _this3._dragHandler);
  654. });
  655. e.preventDefault();
  656. },
  657. handleMaskClick: function handleMaskClick() {
  658. if (this.maskClosable) {
  659. this.hide();
  660. }
  661. },
  662. reset: function reset() {
  663. this.transform = {
  664. scale: 1,
  665. deg: 0,
  666. offsetX: 0,
  667. offsetY: 0,
  668. enableTransition: false
  669. };
  670. },
  671. toggleMode: function toggleMode() {
  672. if (this.loading) return;
  673. var modeNames = Object.keys(Mode);
  674. var modeValues = Object.values(Mode);
  675. var index = modeValues.indexOf(this.mode);
  676. var nextIndex = (index + 1) % modeNames.length;
  677. this.mode = Mode[modeNames[nextIndex]];
  678. this.reset();
  679. },
  680. prev: function prev() {
  681. if (this.isFirst && !this.infinite) return;
  682. var len = this.urlList.length;
  683. this.index = (this.index - 1 + len) % len;
  684. },
  685. next: function next() {
  686. if (this.isLast && !this.infinite) return;
  687. var len = this.urlList.length;
  688. this.index = (this.index + 1) % len;
  689. },
  690. handleActions: function handleActions(action) {
  691. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  692. if (this.loading) return;
  693. var _zoomRate$rotateDeg$e = _extends({
  694. zoomRate: 0.2,
  695. rotateDeg: 90,
  696. enableTransition: true
  697. }, options),
  698. zoomRate = _zoomRate$rotateDeg$e.zoomRate,
  699. rotateDeg = _zoomRate$rotateDeg$e.rotateDeg,
  700. enableTransition = _zoomRate$rotateDeg$e.enableTransition;
  701. var transform = this.transform;
  702. switch (action) {
  703. case 'zoomOut':
  704. if (transform.scale > 0.2) {
  705. transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
  706. }
  707. break;
  708. case 'zoomIn':
  709. transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
  710. break;
  711. case 'clocelise':
  712. transform.deg += rotateDeg;
  713. break;
  714. case 'anticlocelise':
  715. transform.deg -= rotateDeg;
  716. break;
  717. }
  718. transform.enableTransition = enableTransition;
  719. }
  720. },
  721. mounted: function mounted() {
  722. this.deviceSupportInstall();
  723. if (this.appendToBody) {
  724. document.body.appendChild(this.$el);
  725. }
  726. // add tabindex then wrapper can be focusable via Javascript
  727. // focus wrapper so arrow key can't cause inner scroll behavior underneath
  728. this.$refs['el-image-viewer__wrapper'].focus();
  729. },
  730. destroyed: function destroyed() {
  731. // if appendToBody is true, remove DOM node after destroy
  732. if (this.appendToBody && this.$el && this.$el.parentNode) {
  733. this.$el.parentNode.removeChild(this.$el);
  734. }
  735. }
  736. });
  737. // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=script&lang=js&
  738. /* harmony default export */ var src_image_viewervue_type_script_lang_js_ = (image_viewervue_type_script_lang_js_);
  739. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  740. var componentNormalizer = __webpack_require__(0);
  741. // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue
  742. /* normalize component */
  743. var component = Object(componentNormalizer["a" /* default */])(
  744. src_image_viewervue_type_script_lang_js_,
  745. image_viewervue_type_template_id_5e73b307_render,
  746. image_viewervue_type_template_id_5e73b307_staticRenderFns,
  747. false,
  748. null,
  749. null,
  750. null
  751. )
  752. /* hot reload */
  753. if (false) { var api; }
  754. component.options.__file = "packages/image/src/image-viewer.vue"
  755. /* harmony default export */ var image_viewer = (component.exports);
  756. // EXTERNAL MODULE: external "element-ui/lib/mixins/locale"
  757. var locale_ = __webpack_require__(6);
  758. var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
  759. // EXTERNAL MODULE: external "element-ui/lib/utils/types"
  760. var types_ = __webpack_require__(17);
  761. // EXTERNAL MODULE: external "throttle-debounce/throttle"
  762. var throttle_ = __webpack_require__(25);
  763. var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
  764. // 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&
  765. //
  766. //
  767. //
  768. //
  769. //
  770. //
  771. //
  772. //
  773. //
  774. //
  775. //
  776. //
  777. //
  778. //
  779. //
  780. //
  781. //
  782. //
  783. //
  784. //
  785. //
  786. //
  787. //
  788. var isSupportObjectFit = function isSupportObjectFit() {
  789. return document.documentElement.style.objectFit !== undefined;
  790. };
  791. var ObjectFit = {
  792. NONE: 'none',
  793. CONTAIN: 'contain',
  794. COVER: 'cover',
  795. FILL: 'fill',
  796. SCALE_DOWN: 'scale-down'
  797. };
  798. var prevOverflow = '';
  799. /* harmony default export */ var mainvue_type_script_lang_js_ = ({
  800. name: 'ElImage',
  801. mixins: [locale_default.a],
  802. inheritAttrs: false,
  803. components: {
  804. ImageViewer: image_viewer
  805. },
  806. props: {
  807. src: String,
  808. fit: String,
  809. lazy: Boolean,
  810. scrollContainer: {},
  811. previewSrcList: {
  812. type: Array,
  813. default: function _default() {
  814. return [];
  815. }
  816. },
  817. zIndex: {
  818. type: Number,
  819. default: 2000
  820. }
  821. },
  822. data: function data() {
  823. return {
  824. loading: true,
  825. error: false,
  826. show: !this.lazy,
  827. imageWidth: 0,
  828. imageHeight: 0,
  829. showViewer: false
  830. };
  831. },
  832. computed: {
  833. imageStyle: function imageStyle() {
  834. var fit = this.fit;
  835. if (!this.$isServer && fit) {
  836. return isSupportObjectFit() ? { 'object-fit': fit } : this.getImageStyle(fit);
  837. }
  838. return {};
  839. },
  840. alignCenter: function alignCenter() {
  841. return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
  842. },
  843. preview: function preview() {
  844. var previewSrcList = this.previewSrcList;
  845. return Array.isArray(previewSrcList) && previewSrcList.length > 0;
  846. },
  847. imageIndex: function imageIndex() {
  848. var previewIndex = 0;
  849. var srcIndex = this.previewSrcList.indexOf(this.src);
  850. if (srcIndex >= 0) {
  851. previewIndex = srcIndex;
  852. }
  853. return previewIndex;
  854. }
  855. },
  856. watch: {
  857. src: function src(val) {
  858. this.show && this.loadImage();
  859. },
  860. show: function show(val) {
  861. val && this.loadImage();
  862. }
  863. },
  864. mounted: function mounted() {
  865. if (this.lazy) {
  866. this.addLazyLoadListener();
  867. } else {
  868. this.loadImage();
  869. }
  870. },
  871. beforeDestroy: function beforeDestroy() {
  872. this.lazy && this.removeLazyLoadListener();
  873. },
  874. methods: {
  875. loadImage: function loadImage() {
  876. var _this = this;
  877. if (this.$isServer) return;
  878. // reset status
  879. this.loading = true;
  880. this.error = false;
  881. var img = new Image();
  882. img.onload = function (e) {
  883. return _this.handleLoad(e, img);
  884. };
  885. img.onerror = this.handleError.bind(this);
  886. // bind html attrs
  887. // so it can behave consistently
  888. Object.keys(this.$attrs).forEach(function (key) {
  889. var value = _this.$attrs[key];
  890. img.setAttribute(key, value);
  891. });
  892. img.src = this.src;
  893. },
  894. handleLoad: function handleLoad(e, img) {
  895. this.imageWidth = img.width;
  896. this.imageHeight = img.height;
  897. this.loading = false;
  898. this.error = false;
  899. },
  900. handleError: function handleError(e) {
  901. this.loading = false;
  902. this.error = true;
  903. this.$emit('error', e);
  904. },
  905. handleLazyLoad: function handleLazyLoad() {
  906. if (Object(dom_["isInContainer"])(this.$el, this._scrollContainer)) {
  907. this.show = true;
  908. this.removeLazyLoadListener();
  909. }
  910. },
  911. addLazyLoadListener: function addLazyLoadListener() {
  912. if (this.$isServer) return;
  913. var scrollContainer = this.scrollContainer;
  914. var _scrollContainer = null;
  915. if (Object(types_["isHtmlElement"])(scrollContainer)) {
  916. _scrollContainer = scrollContainer;
  917. } else if (Object(types_["isString"])(scrollContainer)) {
  918. _scrollContainer = document.querySelector(scrollContainer);
  919. } else {
  920. _scrollContainer = Object(dom_["getScrollContainer"])(this.$el);
  921. }
  922. if (_scrollContainer) {
  923. this._scrollContainer = _scrollContainer;
  924. this._lazyLoadHandler = throttle_default()(200, this.handleLazyLoad);
  925. Object(dom_["on"])(_scrollContainer, 'scroll', this._lazyLoadHandler);
  926. this.handleLazyLoad();
  927. }
  928. },
  929. removeLazyLoadListener: function removeLazyLoadListener() {
  930. var _scrollContainer = this._scrollContainer,
  931. _lazyLoadHandler = this._lazyLoadHandler;
  932. if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
  933. Object(dom_["off"])(_scrollContainer, 'scroll', _lazyLoadHandler);
  934. this._scrollContainer = null;
  935. this._lazyLoadHandler = null;
  936. },
  937. /**
  938. * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
  939. */
  940. getImageStyle: function getImageStyle(fit) {
  941. var imageWidth = this.imageWidth,
  942. imageHeight = this.imageHeight;
  943. var _$el = this.$el,
  944. containerWidth = _$el.clientWidth,
  945. containerHeight = _$el.clientHeight;
  946. if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
  947. var imageAspectRatio = imageWidth / imageHeight;
  948. var containerAspectRatio = containerWidth / containerHeight;
  949. if (fit === ObjectFit.SCALE_DOWN) {
  950. var isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
  951. fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
  952. }
  953. switch (fit) {
  954. case ObjectFit.NONE:
  955. return { width: 'auto', height: 'auto' };
  956. case ObjectFit.CONTAIN:
  957. return imageAspectRatio < containerAspectRatio ? { width: 'auto' } : { height: 'auto' };
  958. case ObjectFit.COVER:
  959. return imageAspectRatio < containerAspectRatio ? { height: 'auto' } : { width: 'auto' };
  960. default:
  961. return {};
  962. }
  963. },
  964. clickHandler: function clickHandler() {
  965. // don't show viewer when preview is false
  966. if (!this.preview) {
  967. return;
  968. }
  969. // prevent body scroll
  970. prevOverflow = document.body.style.overflow;
  971. document.body.style.overflow = 'hidden';
  972. this.showViewer = true;
  973. },
  974. closeViewer: function closeViewer() {
  975. document.body.style.overflow = prevOverflow;
  976. this.showViewer = false;
  977. }
  978. }
  979. });
  980. // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=script&lang=js&
  981. /* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_);
  982. // CONCATENATED MODULE: ./packages/image/src/main.vue
  983. /* normalize component */
  984. var main_component = Object(componentNormalizer["a" /* default */])(
  985. src_mainvue_type_script_lang_js_,
  986. render,
  987. staticRenderFns,
  988. false,
  989. null,
  990. null,
  991. null
  992. )
  993. /* hot reload */
  994. if (false) { var main_api; }
  995. main_component.options.__file = "packages/image/src/main.vue"
  996. /* harmony default export */ var main = (main_component.exports);
  997. // CONCATENATED MODULE: ./packages/image/index.js
  998. /* istanbul ignore next */
  999. main.install = function (Vue) {
  1000. Vue.component(main.name, main);
  1001. };
  1002. /* harmony default export */ var packages_image = __webpack_exports__["default"] = (main);
  1003. /***/ })
  1004. /******/ });