image.js 28 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049
  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 = 64);
  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. /***/ 19:
  180. /***/ (function(module, exports) {
  181. module.exports = require("element-ui/lib/utils/types");
  182. /***/ }),
  183. /***/ 2:
  184. /***/ (function(module, exports) {
  185. module.exports = require("element-ui/lib/utils/dom");
  186. /***/ }),
  187. /***/ 25:
  188. /***/ (function(module, exports) {
  189. module.exports = require("throttle-debounce/throttle");
  190. /***/ }),
  191. /***/ 3:
  192. /***/ (function(module, exports) {
  193. module.exports = require("element-ui/lib/utils/util");
  194. /***/ }),
  195. /***/ 6:
  196. /***/ (function(module, exports) {
  197. module.exports = require("element-ui/lib/mixins/locale");
  198. /***/ }),
  199. /***/ 64:
  200. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  201. "use strict";
  202. __webpack_require__.r(__webpack_exports__);
  203. // 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&
  204. var render = function() {
  205. var _vm = this
  206. var _h = _vm.$createElement
  207. var _c = _vm._self._c || _h
  208. return _c(
  209. "div",
  210. { staticClass: "el-image" },
  211. [
  212. _vm.loading
  213. ? _vm._t("placeholder", [
  214. _c("div", { staticClass: "el-image__placeholder" })
  215. ])
  216. : _vm.error
  217. ? _vm._t("error", [
  218. _c("div", { staticClass: "el-image__error" }, [
  219. _vm._v(_vm._s(_vm.t("el.image.error")))
  220. ])
  221. ])
  222. : _c(
  223. "img",
  224. _vm._g(
  225. _vm._b(
  226. {
  227. staticClass: "el-image__inner",
  228. class: {
  229. "el-image__inner--center": _vm.alignCenter,
  230. "el-image__preview": _vm.preview
  231. },
  232. style: _vm.imageStyle,
  233. attrs: { src: _vm.src },
  234. on: { click: _vm.clickHandler }
  235. },
  236. "img",
  237. _vm.$attrs,
  238. false
  239. ),
  240. _vm.$listeners
  241. )
  242. ),
  243. _vm.preview && _vm.showViewer
  244. ? _c("image-viewer", {
  245. attrs: {
  246. "z-index": _vm.zIndex,
  247. "on-close": _vm.closeViewer,
  248. "url-list": _vm.previewSrcList
  249. }
  250. })
  251. : _vm._e()
  252. ],
  253. 2
  254. )
  255. }
  256. var staticRenderFns = []
  257. render._withStripped = true
  258. // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=template&id=44d84a7c&
  259. // 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&
  260. var image_viewervue_type_template_id_5e73b307_render = function() {
  261. var _vm = this
  262. var _h = _vm.$createElement
  263. var _c = _vm._self._c || _h
  264. return _c("transition", { attrs: { name: "viewer-fade" } }, [
  265. _c(
  266. "div",
  267. {
  268. staticClass: "el-image-viewer__wrapper",
  269. style: { "z-index": _vm.zIndex }
  270. },
  271. [
  272. _c("div", { staticClass: "el-image-viewer__mask" }),
  273. _c(
  274. "span",
  275. {
  276. staticClass: "el-image-viewer__btn el-image-viewer__close",
  277. on: { click: _vm.hide }
  278. },
  279. [_c("i", { staticClass: "el-icon-circle-close" })]
  280. ),
  281. !_vm.isSingle
  282. ? [
  283. _c(
  284. "span",
  285. {
  286. staticClass: "el-image-viewer__btn el-image-viewer__prev",
  287. class: { "is-disabled": !_vm.infinite && _vm.isFirst },
  288. on: { click: _vm.prev }
  289. },
  290. [_c("i", { staticClass: "el-icon-arrow-left" })]
  291. ),
  292. _c(
  293. "span",
  294. {
  295. staticClass: "el-image-viewer__btn el-image-viewer__next",
  296. class: { "is-disabled": !_vm.infinite && _vm.isLast },
  297. on: { click: _vm.next }
  298. },
  299. [_c("i", { staticClass: "el-icon-arrow-right" })]
  300. )
  301. ]
  302. : _vm._e(),
  303. _c(
  304. "div",
  305. { staticClass: "el-image-viewer__btn el-image-viewer__actions" },
  306. [
  307. _c("div", { staticClass: "el-image-viewer__actions__inner" }, [
  308. _c("i", {
  309. staticClass: "el-icon-zoom-out",
  310. on: {
  311. click: function($event) {
  312. _vm.handleActions("zoomOut")
  313. }
  314. }
  315. }),
  316. _c("i", {
  317. staticClass: "el-icon-zoom-in",
  318. on: {
  319. click: function($event) {
  320. _vm.handleActions("zoomIn")
  321. }
  322. }
  323. }),
  324. _c("i", { staticClass: "el-image-viewer__actions__divider" }),
  325. _c("i", { class: _vm.mode.icon, on: { click: _vm.toggleMode } }),
  326. _c("i", { staticClass: "el-image-viewer__actions__divider" }),
  327. _c("i", {
  328. staticClass: "el-icon-refresh-left",
  329. on: {
  330. click: function($event) {
  331. _vm.handleActions("anticlocelise")
  332. }
  333. }
  334. }),
  335. _c("i", {
  336. staticClass: "el-icon-refresh-right",
  337. on: {
  338. click: function($event) {
  339. _vm.handleActions("clocelise")
  340. }
  341. }
  342. })
  343. ])
  344. ]
  345. ),
  346. _c(
  347. "div",
  348. { staticClass: "el-image-viewer__canvas" },
  349. _vm._l(_vm.urlList, function(url, i) {
  350. return i === _vm.index
  351. ? _c("img", {
  352. key: url,
  353. ref: "img",
  354. refInFor: true,
  355. staticClass: "el-image-viewer__img",
  356. style: _vm.imgStyle,
  357. attrs: { src: _vm.currentImg },
  358. on: {
  359. load: _vm.handleImgLoad,
  360. error: _vm.handleImgError,
  361. mousedown: _vm.handleMouseDown
  362. }
  363. })
  364. : _vm._e()
  365. }),
  366. 0
  367. )
  368. ],
  369. 2
  370. )
  371. ])
  372. }
  373. var image_viewervue_type_template_id_5e73b307_staticRenderFns = []
  374. image_viewervue_type_template_id_5e73b307_render._withStripped = true
  375. // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=template&id=5e73b307&
  376. // EXTERNAL MODULE: external "element-ui/lib/utils/dom"
  377. var dom_ = __webpack_require__(2);
  378. // EXTERNAL MODULE: external "element-ui/lib/utils/util"
  379. var util_ = __webpack_require__(3);
  380. // 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&
  381. 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; };
  382. //
  383. //
  384. //
  385. //
  386. //
  387. //
  388. //
  389. //
  390. //
  391. //
  392. //
  393. //
  394. //
  395. //
  396. //
  397. //
  398. //
  399. //
  400. //
  401. //
  402. //
  403. //
  404. //
  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. var Mode = {
  436. CONTAIN: {
  437. name: 'contain',
  438. icon: 'el-icon-full-screen'
  439. },
  440. ORIGINAL: {
  441. name: 'original',
  442. icon: 'el-icon-c-scale-to-original'
  443. }
  444. };
  445. var mousewheelEventName = Object(util_["isFirefox"])() ? 'DOMMouseScroll' : 'mousewheel';
  446. /* harmony default export */ var image_viewervue_type_script_lang_js_ = ({
  447. name: 'elImageViewer',
  448. props: {
  449. urlList: {
  450. type: Array,
  451. default: function _default() {
  452. return [];
  453. }
  454. },
  455. zIndex: {
  456. type: Number,
  457. default: 2000
  458. },
  459. onSwitch: {
  460. type: Function,
  461. default: function _default() {}
  462. },
  463. onClose: {
  464. type: Function,
  465. default: function _default() {}
  466. }
  467. },
  468. data: function data() {
  469. return {
  470. index: 0,
  471. isShow: false,
  472. infinite: true,
  473. loading: false,
  474. mode: Mode.CONTAIN,
  475. transform: {
  476. scale: 1,
  477. deg: 0,
  478. offsetX: 0,
  479. offsetY: 0,
  480. enableTransition: false
  481. }
  482. };
  483. },
  484. computed: {
  485. isSingle: function isSingle() {
  486. return this.urlList.length <= 1;
  487. },
  488. isFirst: function isFirst() {
  489. return this.index === 0;
  490. },
  491. isLast: function isLast() {
  492. return this.index === this.urlList.length - 1;
  493. },
  494. currentImg: function currentImg() {
  495. return this.urlList[this.index];
  496. },
  497. imgStyle: function imgStyle() {
  498. var _transform = this.transform,
  499. scale = _transform.scale,
  500. deg = _transform.deg,
  501. offsetX = _transform.offsetX,
  502. offsetY = _transform.offsetY,
  503. enableTransition = _transform.enableTransition;
  504. var style = {
  505. transform: 'scale(' + scale + ') rotate(' + deg + 'deg)',
  506. transition: enableTransition ? 'transform .3s' : '',
  507. 'margin-left': offsetX + 'px',
  508. 'margin-top': offsetY + 'px'
  509. };
  510. if (this.mode === Mode.CONTAIN) {
  511. style.maxWidth = style.maxHeight = '100%';
  512. }
  513. return style;
  514. }
  515. },
  516. watch: {
  517. index: {
  518. handler: function handler(val) {
  519. this.reset();
  520. this.onSwitch(val);
  521. }
  522. },
  523. currentImg: function currentImg(val) {
  524. var _this = this;
  525. this.$nextTick(function (_) {
  526. var $img = _this.$refs.img[0];
  527. if (!$img.complete) {
  528. _this.loading = true;
  529. }
  530. });
  531. }
  532. },
  533. methods: {
  534. hide: function hide() {
  535. this.deviceSupportUninstall();
  536. this.onClose();
  537. },
  538. deviceSupportInstall: function deviceSupportInstall() {
  539. var _this2 = this;
  540. this._keyDownHandler = Object(util_["rafThrottle"])(function (e) {
  541. var keyCode = e.keyCode;
  542. switch (keyCode) {
  543. // ESC
  544. case 27:
  545. _this2.hide();
  546. break;
  547. // SPACE
  548. case 32:
  549. _this2.toggleMode();
  550. break;
  551. // LEFT_ARROW
  552. case 37:
  553. _this2.prev();
  554. break;
  555. // UP_ARROW
  556. case 38:
  557. _this2.handleActions('zoomIn');
  558. break;
  559. // RIGHT_ARROW
  560. case 39:
  561. _this2.next();
  562. break;
  563. // DOWN_ARROW
  564. case 40:
  565. _this2.handleActions('zoomOut');
  566. break;
  567. }
  568. });
  569. this._mouseWheelHandler = Object(util_["rafThrottle"])(function (e) {
  570. var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
  571. if (delta > 0) {
  572. _this2.handleActions('zoomIn', {
  573. zoomRate: 0.015,
  574. enableTransition: false
  575. });
  576. } else {
  577. _this2.handleActions('zoomOut', {
  578. zoomRate: 0.015,
  579. enableTransition: false
  580. });
  581. }
  582. });
  583. Object(dom_["on"])(document, 'keydown', this._keyDownHandler);
  584. Object(dom_["on"])(document, mousewheelEventName, this._mouseWheelHandler);
  585. },
  586. deviceSupportUninstall: function deviceSupportUninstall() {
  587. Object(dom_["off"])(document, 'keydown', this._keyDownHandler);
  588. Object(dom_["off"])(document, mousewheelEventName, this._mouseWheelHandler);
  589. this._keyDownHandler = null;
  590. this._mouseWheelHandler = null;
  591. },
  592. handleImgLoad: function handleImgLoad(e) {
  593. this.loading = false;
  594. },
  595. handleImgError: function handleImgError(e) {
  596. this.loading = false;
  597. e.target.alt = '加载失败';
  598. },
  599. handleMouseDown: function handleMouseDown(e) {
  600. var _this3 = this;
  601. if (this.loading || e.button !== 0) return;
  602. var _transform2 = this.transform,
  603. offsetX = _transform2.offsetX,
  604. offsetY = _transform2.offsetY;
  605. var startX = e.pageX;
  606. var startY = e.pageY;
  607. this._dragHandler = Object(util_["rafThrottle"])(function (ev) {
  608. _this3.transform.offsetX = offsetX + ev.pageX - startX;
  609. _this3.transform.offsetY = offsetY + ev.pageY - startY;
  610. });
  611. Object(dom_["on"])(document, 'mousemove', this._dragHandler);
  612. Object(dom_["on"])(document, 'mouseup', function (ev) {
  613. Object(dom_["off"])(document, 'mousemove', _this3._dragHandler);
  614. });
  615. e.preventDefault();
  616. },
  617. reset: function reset() {
  618. this.transform = {
  619. scale: 1,
  620. deg: 0,
  621. offsetX: 0,
  622. offsetY: 0,
  623. enableTransition: false
  624. };
  625. },
  626. toggleMode: function toggleMode() {
  627. if (this.loading) return;
  628. var modeNames = Object.keys(Mode);
  629. var modeValues = Object.values(Mode);
  630. var index = modeValues.indexOf(this.mode);
  631. var nextIndex = (index + 1) % modeNames.length;
  632. this.mode = Mode[modeNames[nextIndex]];
  633. this.reset();
  634. },
  635. prev: function prev() {
  636. if (this.isFirst && !this.infinite) return;
  637. var len = this.urlList.length;
  638. this.index = (this.index - 1 + len) % len;
  639. },
  640. next: function next() {
  641. if (this.isLast && !this.infinite) return;
  642. var len = this.urlList.length;
  643. this.index = (this.index + 1) % len;
  644. },
  645. handleActions: function handleActions(action) {
  646. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  647. if (this.loading) return;
  648. var _zoomRate$rotateDeg$e = _extends({
  649. zoomRate: 0.2,
  650. rotateDeg: 90,
  651. enableTransition: true
  652. }, options),
  653. zoomRate = _zoomRate$rotateDeg$e.zoomRate,
  654. rotateDeg = _zoomRate$rotateDeg$e.rotateDeg,
  655. enableTransition = _zoomRate$rotateDeg$e.enableTransition;
  656. var transform = this.transform;
  657. switch (action) {
  658. case 'zoomOut':
  659. if (transform.scale > 0.2) {
  660. transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
  661. }
  662. break;
  663. case 'zoomIn':
  664. transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
  665. break;
  666. case 'clocelise':
  667. transform.deg += rotateDeg;
  668. break;
  669. case 'anticlocelise':
  670. transform.deg -= rotateDeg;
  671. break;
  672. }
  673. transform.enableTransition = enableTransition;
  674. }
  675. },
  676. mounted: function mounted() {
  677. this.deviceSupportInstall();
  678. }
  679. });
  680. // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue?vue&type=script&lang=js&
  681. /* harmony default export */ var src_image_viewervue_type_script_lang_js_ = (image_viewervue_type_script_lang_js_);
  682. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  683. var componentNormalizer = __webpack_require__(0);
  684. // CONCATENATED MODULE: ./packages/image/src/image-viewer.vue
  685. /* normalize component */
  686. var component = Object(componentNormalizer["a" /* default */])(
  687. src_image_viewervue_type_script_lang_js_,
  688. image_viewervue_type_template_id_5e73b307_render,
  689. image_viewervue_type_template_id_5e73b307_staticRenderFns,
  690. false,
  691. null,
  692. null,
  693. null
  694. )
  695. /* hot reload */
  696. if (false) { var api; }
  697. component.options.__file = "packages/image/src/image-viewer.vue"
  698. /* harmony default export */ var image_viewer = (component.exports);
  699. // EXTERNAL MODULE: external "element-ui/lib/mixins/locale"
  700. var locale_ = __webpack_require__(6);
  701. var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
  702. // EXTERNAL MODULE: external "element-ui/lib/utils/types"
  703. var types_ = __webpack_require__(19);
  704. // EXTERNAL MODULE: external "throttle-debounce/throttle"
  705. var throttle_ = __webpack_require__(25);
  706. var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
  707. // 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&
  708. //
  709. //
  710. //
  711. //
  712. //
  713. //
  714. //
  715. //
  716. //
  717. //
  718. //
  719. //
  720. //
  721. //
  722. //
  723. //
  724. //
  725. //
  726. //
  727. //
  728. //
  729. var isSupportObjectFit = function isSupportObjectFit() {
  730. return document.documentElement.style.objectFit !== undefined;
  731. };
  732. var ObjectFit = {
  733. NONE: 'none',
  734. CONTAIN: 'contain',
  735. COVER: 'cover',
  736. FILL: 'fill',
  737. SCALE_DOWN: 'scale-down'
  738. };
  739. /* harmony default export */ var mainvue_type_script_lang_js_ = ({
  740. name: 'ElImage',
  741. mixins: [locale_default.a],
  742. inheritAttrs: false,
  743. components: {
  744. ImageViewer: image_viewer
  745. },
  746. props: {
  747. src: String,
  748. fit: String,
  749. lazy: Boolean,
  750. scrollContainer: {},
  751. previewSrcList: {
  752. type: Array,
  753. default: function _default() {
  754. return [];
  755. }
  756. },
  757. zIndex: {
  758. type: Number,
  759. default: 2000
  760. }
  761. },
  762. data: function data() {
  763. return {
  764. loading: true,
  765. error: false,
  766. show: !this.lazy,
  767. imageWidth: 0,
  768. imageHeight: 0,
  769. showViewer: false
  770. };
  771. },
  772. computed: {
  773. imageStyle: function imageStyle() {
  774. var fit = this.fit;
  775. if (!this.$isServer && fit) {
  776. return isSupportObjectFit() ? { 'object-fit': fit } : this.getImageStyle(fit);
  777. }
  778. return {};
  779. },
  780. alignCenter: function alignCenter() {
  781. return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
  782. },
  783. preview: function preview() {
  784. var previewSrcList = this.previewSrcList;
  785. return Array.isArray(previewSrcList) && previewSrcList.length > 0;
  786. }
  787. },
  788. watch: {
  789. src: function src(val) {
  790. this.show && this.loadImage();
  791. },
  792. show: function show(val) {
  793. val && this.loadImage();
  794. }
  795. },
  796. mounted: function mounted() {
  797. if (this.lazy) {
  798. this.addLazyLoadListener();
  799. } else {
  800. this.loadImage();
  801. }
  802. },
  803. beforeDestroy: function beforeDestroy() {
  804. this.lazy && this.removeLazyLoadListener();
  805. },
  806. methods: {
  807. loadImage: function loadImage() {
  808. var _this = this;
  809. if (this.$isServer) return;
  810. // reset status
  811. this.loading = true;
  812. this.error = false;
  813. var img = new Image();
  814. img.onload = function (e) {
  815. return _this.handleLoad(e, img);
  816. };
  817. img.onerror = this.handleError.bind(this);
  818. // bind html attrs
  819. // so it can behave consistently
  820. Object.keys(this.$attrs).forEach(function (key) {
  821. var value = _this.$attrs[key];
  822. img.setAttribute(key, value);
  823. });
  824. img.src = this.src;
  825. },
  826. handleLoad: function handleLoad(e, img) {
  827. this.imageWidth = img.width;
  828. this.imageHeight = img.height;
  829. this.loading = false;
  830. },
  831. handleError: function handleError(e) {
  832. this.loading = false;
  833. this.error = true;
  834. this.$emit('error', e);
  835. },
  836. handleLazyLoad: function handleLazyLoad() {
  837. if (Object(dom_["isInContainer"])(this.$el, this._scrollContainer)) {
  838. this.show = true;
  839. this.removeLazyLoadListener();
  840. }
  841. },
  842. addLazyLoadListener: function addLazyLoadListener() {
  843. if (this.$isServer) return;
  844. var scrollContainer = this.scrollContainer;
  845. var _scrollContainer = null;
  846. if (Object(types_["isHtmlElement"])(scrollContainer)) {
  847. _scrollContainer = scrollContainer;
  848. } else if (Object(types_["isString"])(scrollContainer)) {
  849. _scrollContainer = document.querySelector(scrollContainer);
  850. } else {
  851. _scrollContainer = Object(dom_["getScrollContainer"])(this.$el);
  852. }
  853. if (_scrollContainer) {
  854. this._scrollContainer = _scrollContainer;
  855. this._lazyLoadHandler = throttle_default()(200, this.handleLazyLoad);
  856. Object(dom_["on"])(_scrollContainer, 'scroll', this._lazyLoadHandler);
  857. this.handleLazyLoad();
  858. }
  859. },
  860. removeLazyLoadListener: function removeLazyLoadListener() {
  861. var _scrollContainer = this._scrollContainer,
  862. _lazyLoadHandler = this._lazyLoadHandler;
  863. if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
  864. Object(dom_["off"])(_scrollContainer, 'scroll', _lazyLoadHandler);
  865. this._scrollContainer = null;
  866. this._lazyLoadHandler = null;
  867. },
  868. /**
  869. * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
  870. */
  871. getImageStyle: function getImageStyle(fit) {
  872. var imageWidth = this.imageWidth,
  873. imageHeight = this.imageHeight;
  874. var _$el = this.$el,
  875. containerWidth = _$el.clientWidth,
  876. containerHeight = _$el.clientHeight;
  877. if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
  878. var vertical = imageWidth / imageHeight < 1;
  879. if (fit === ObjectFit.SCALE_DOWN) {
  880. var isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
  881. fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
  882. }
  883. switch (fit) {
  884. case ObjectFit.NONE:
  885. return { width: 'auto', height: 'auto' };
  886. case ObjectFit.CONTAIN:
  887. return vertical ? { width: 'auto' } : { height: 'auto' };
  888. case ObjectFit.COVER:
  889. return vertical ? { height: 'auto' } : { width: 'auto' };
  890. default:
  891. return {};
  892. }
  893. },
  894. clickHandler: function clickHandler() {
  895. this.showViewer = true;
  896. },
  897. closeViewer: function closeViewer() {
  898. this.showViewer = false;
  899. }
  900. }
  901. });
  902. // CONCATENATED MODULE: ./packages/image/src/main.vue?vue&type=script&lang=js&
  903. /* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_);
  904. // CONCATENATED MODULE: ./packages/image/src/main.vue
  905. /* normalize component */
  906. var main_component = Object(componentNormalizer["a" /* default */])(
  907. src_mainvue_type_script_lang_js_,
  908. render,
  909. staticRenderFns,
  910. false,
  911. null,
  912. null,
  913. null
  914. )
  915. /* hot reload */
  916. if (false) { var main_api; }
  917. main_component.options.__file = "packages/image/src/main.vue"
  918. /* harmony default export */ var main = (main_component.exports);
  919. // CONCATENATED MODULE: ./packages/image/index.js
  920. /* istanbul ignore next */
  921. main.install = function (Vue) {
  922. Vue.component(main.name, main);
  923. };
  924. /* harmony default export */ var packages_image = __webpack_exports__["default"] = (main);
  925. /***/ })
  926. /******/ });