image.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140
  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 = 67);
  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. /***/ 67:
  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. initialIndex: Number
  822. },
  823. data: function data() {
  824. return {
  825. loading: true,
  826. error: false,
  827. show: !this.lazy,
  828. imageWidth: 0,
  829. imageHeight: 0,
  830. showViewer: false
  831. };
  832. },
  833. computed: {
  834. imageStyle: function imageStyle() {
  835. var fit = this.fit;
  836. if (!this.$isServer && fit) {
  837. return isSupportObjectFit() ? { 'object-fit': fit } : this.getImageStyle(fit);
  838. }
  839. return {};
  840. },
  841. alignCenter: function alignCenter() {
  842. return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
  843. },
  844. preview: function preview() {
  845. var previewSrcList = this.previewSrcList;
  846. return Array.isArray(previewSrcList) && previewSrcList.length > 0;
  847. },
  848. imageIndex: function imageIndex() {
  849. var previewIndex = 0;
  850. var initialIndex = this.initialIndex;
  851. if (initialIndex >= 0) {
  852. previewIndex = initialIndex;
  853. return previewIndex;
  854. }
  855. var srcIndex = this.previewSrcList.indexOf(this.src);
  856. if (srcIndex >= 0) {
  857. previewIndex = srcIndex;
  858. return previewIndex;
  859. }
  860. return previewIndex;
  861. }
  862. },
  863. watch: {
  864. src: function src(val) {
  865. this.show && this.loadImage();
  866. },
  867. show: function show(val) {
  868. val && this.loadImage();
  869. }
  870. },
  871. mounted: function mounted() {
  872. if (this.lazy) {
  873. this.addLazyLoadListener();
  874. } else {
  875. this.loadImage();
  876. }
  877. },
  878. beforeDestroy: function beforeDestroy() {
  879. this.lazy && this.removeLazyLoadListener();
  880. },
  881. methods: {
  882. loadImage: function loadImage() {
  883. var _this = this;
  884. if (this.$isServer) return;
  885. // reset status
  886. this.loading = true;
  887. this.error = false;
  888. var img = new Image();
  889. img.onload = function (e) {
  890. return _this.handleLoad(e, img);
  891. };
  892. img.onerror = this.handleError.bind(this);
  893. // bind html attrs
  894. // so it can behave consistently
  895. Object.keys(this.$attrs).forEach(function (key) {
  896. var value = _this.$attrs[key];
  897. img.setAttribute(key, value);
  898. });
  899. img.src = this.src;
  900. },
  901. handleLoad: function handleLoad(e, img) {
  902. this.imageWidth = img.width;
  903. this.imageHeight = img.height;
  904. this.loading = false;
  905. this.error = false;
  906. },
  907. handleError: function handleError(e) {
  908. this.loading = false;
  909. this.error = true;
  910. this.$emit('error', e);
  911. },
  912. handleLazyLoad: function handleLazyLoad() {
  913. if (Object(dom_["isInContainer"])(this.$el, this._scrollContainer)) {
  914. this.show = true;
  915. this.removeLazyLoadListener();
  916. }
  917. },
  918. addLazyLoadListener: function addLazyLoadListener() {
  919. if (this.$isServer) return;
  920. var scrollContainer = this.scrollContainer;
  921. var _scrollContainer = null;
  922. if (Object(types_["isHtmlElement"])(scrollContainer)) {
  923. _scrollContainer = scrollContainer;
  924. } else if (Object(types_["isString"])(scrollContainer)) {
  925. _scrollContainer = document.querySelector(scrollContainer);
  926. } else {
  927. _scrollContainer = Object(dom_["getScrollContainer"])(this.$el);
  928. }
  929. if (_scrollContainer) {
  930. this._scrollContainer = _scrollContainer;
  931. this._lazyLoadHandler = throttle_default()(200, this.handleLazyLoad);
  932. Object(dom_["on"])(_scrollContainer, 'scroll', this._lazyLoadHandler);
  933. this.handleLazyLoad();
  934. }
  935. },
  936. removeLazyLoadListener: function removeLazyLoadListener() {
  937. var _scrollContainer = this._scrollContainer,
  938. _lazyLoadHandler = this._lazyLoadHandler;
  939. if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
  940. Object(dom_["off"])(_scrollContainer, 'scroll', _lazyLoadHandler);
  941. this._scrollContainer = null;
  942. this._lazyLoadHandler = null;
  943. },
  944. /**
  945. * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
  946. */
  947. getImageStyle: function getImageStyle(fit) {
  948. var imageWidth = this.imageWidth,
  949. imageHeight = this.imageHeight;
  950. var _$el = this.$el,
  951. containerWidth = _$el.clientWidth,
  952. containerHeight = _$el.clientHeight;
  953. if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
  954. var imageAspectRatio = imageWidth / imageHeight;
  955. var containerAspectRatio = containerWidth / containerHeight;
  956. if (fit === ObjectFit.SCALE_DOWN) {
  957. var isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
  958. fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
  959. }
  960. switch (fit) {
  961. case ObjectFit.NONE:
  962. return { width: 'auto', height: 'auto' };
  963. case ObjectFit.CONTAIN:
  964. return imageAspectRatio < containerAspectRatio ? { width: 'auto' } : { height: 'auto' };
  965. case ObjectFit.COVER:
  966. return imageAspectRatio < containerAspectRatio ? { height: 'auto' } : { width: 'auto' };
  967. default:
  968. return {};
  969. }
  970. },
  971. clickHandler: function clickHandler() {
  972. // don't show viewer when preview is false
  973. if (!this.preview) {
  974. return;
  975. }
  976. // prevent body scroll
  977. prevOverflow = document.body.style.overflow;
  978. document.body.style.overflow = 'hidden';
  979. this.showViewer = true;
  980. },
  981. closeViewer: function closeViewer() {
  982. document.body.style.overflow = prevOverflow;
  983. this.showViewer = false;
  984. }
  985. }
  986. });
  987. // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=script&lang=js&
  988. /* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_);
  989. // CONCATENATED MODULE: ./packages/image/src/main.vue
  990. /* normalize component */
  991. var main_component = Object(componentNormalizer["a" /* default */])(
  992. src_mainvue_type_script_lang_js_,
  993. render,
  994. staticRenderFns,
  995. false,
  996. null,
  997. null,
  998. null
  999. )
  1000. /* hot reload */
  1001. if (false) { var main_api; }
  1002. main_component.options.__file = "packages/image/src/main.vue"
  1003. /* harmony default export */ var main = (main_component.exports);
  1004. // CONCATENATED MODULE: ./packages/image/index.js
  1005. /* istanbul ignore next */
  1006. main.install = function (Vue) {
  1007. Vue.component(main.name, main);
  1008. };
  1009. /* harmony default export */ var packages_image = __webpack_exports__["default"] = (main);
  1010. /***/ })
  1011. /******/ });