index.js 4.2 KB

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