index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
  6. var _utils = require("../utils");
  7. var _icon = _interopRequireDefault(require("../icon"));
  8. var _createNamespace = (0, _utils.createNamespace)('image'),
  9. createComponent = _createNamespace[0],
  10. bem = _createNamespace[1];
  11. var _default = createComponent({
  12. props: {
  13. src: String,
  14. fit: String,
  15. alt: String,
  16. round: Boolean,
  17. width: [Number, String],
  18. height: [Number, String],
  19. radius: [Number, String],
  20. lazyLoad: Boolean,
  21. iconPrefix: String,
  22. showError: {
  23. type: Boolean,
  24. default: true
  25. },
  26. showLoading: {
  27. type: Boolean,
  28. default: true
  29. },
  30. errorIcon: {
  31. type: String,
  32. default: 'photo-fail'
  33. },
  34. loadingIcon: {
  35. type: String,
  36. default: 'photo'
  37. }
  38. },
  39. data: function data() {
  40. return {
  41. loading: true,
  42. error: false
  43. };
  44. },
  45. watch: {
  46. src: function src() {
  47. this.loading = true;
  48. this.error = false;
  49. }
  50. },
  51. computed: {
  52. style: function style() {
  53. var style = {};
  54. if ((0, _utils.isDef)(this.width)) {
  55. style.width = (0, _utils.addUnit)(this.width);
  56. }
  57. if ((0, _utils.isDef)(this.height)) {
  58. style.height = (0, _utils.addUnit)(this.height);
  59. }
  60. if ((0, _utils.isDef)(this.radius)) {
  61. style.overflow = 'hidden';
  62. style.borderRadius = (0, _utils.addUnit)(this.radius);
  63. }
  64. return style;
  65. }
  66. },
  67. created: function created() {
  68. var $Lazyload = this.$Lazyload;
  69. if ($Lazyload && _utils.inBrowser) {
  70. $Lazyload.$on('loaded', this.onLazyLoaded);
  71. $Lazyload.$on('error', this.onLazyLoadError);
  72. }
  73. },
  74. beforeDestroy: function beforeDestroy() {
  75. var $Lazyload = this.$Lazyload;
  76. if ($Lazyload) {
  77. $Lazyload.$off('loaded', this.onLazyLoaded);
  78. $Lazyload.$off('error', this.onLazyLoadError);
  79. }
  80. },
  81. methods: {
  82. onLoad: function onLoad(event) {
  83. this.loading = false;
  84. this.$emit('load', event);
  85. },
  86. onLazyLoaded: function onLazyLoaded(_ref) {
  87. var el = _ref.el;
  88. if (el === this.$refs.image && this.loading) {
  89. this.onLoad();
  90. }
  91. },
  92. onLazyLoadError: function onLazyLoadError(_ref2) {
  93. var el = _ref2.el;
  94. if (el === this.$refs.image && !this.error) {
  95. this.onError();
  96. }
  97. },
  98. onError: function onError(event) {
  99. this.error = true;
  100. this.loading = false;
  101. this.$emit('error', event);
  102. },
  103. onClick: function onClick(event) {
  104. this.$emit('click', event);
  105. },
  106. genPlaceholder: function genPlaceholder() {
  107. var h = this.$createElement;
  108. if (this.loading && this.showLoading) {
  109. return h("div", {
  110. "class": bem('loading')
  111. }, [this.slots('loading') || h(_icon.default, {
  112. "attrs": {
  113. "name": this.loadingIcon,
  114. "classPrefix": this.iconPrefix
  115. },
  116. "class": bem('loading-icon')
  117. })]);
  118. }
  119. if (this.error && this.showError) {
  120. return h("div", {
  121. "class": bem('error')
  122. }, [this.slots('error') || h(_icon.default, {
  123. "attrs": {
  124. "name": this.errorIcon,
  125. "classPrefix": this.iconPrefix
  126. },
  127. "class": bem('error-icon')
  128. })]);
  129. }
  130. },
  131. genImage: function genImage() {
  132. var h = this.$createElement;
  133. var imgData = {
  134. class: bem('img'),
  135. attrs: {
  136. alt: this.alt
  137. },
  138. style: {
  139. objectFit: this.fit
  140. }
  141. };
  142. if (this.error) {
  143. return;
  144. }
  145. if (this.lazyLoad) {
  146. return h("img", (0, _babelHelperVueJsxMergeProps.default)([{
  147. "ref": "image",
  148. "directives": [{
  149. name: "lazy",
  150. value: this.src
  151. }]
  152. }, imgData]));
  153. }
  154. return h("img", (0, _babelHelperVueJsxMergeProps.default)([{
  155. "attrs": {
  156. "src": this.src
  157. },
  158. "on": {
  159. "load": this.onLoad,
  160. "error": this.onError
  161. }
  162. }, imgData]));
  163. }
  164. },
  165. render: function render() {
  166. var h = arguments[0];
  167. return h("div", {
  168. "class": bem({
  169. round: this.round
  170. }),
  171. "style": this.style,
  172. "on": {
  173. "click": this.onClick
  174. }
  175. }, [this.genImage(), this.genPlaceholder(), this.slots()]);
  176. }
  177. });
  178. exports.default = _default;