image.js 3.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import ImageProps from './props';
  9. import config from '../common/config';
  10. import { addUnit, getRect, appBaseInfo } from '../common/utils';
  11. import { compareVersion } from '../common/version';
  12. const { prefix } = config;
  13. const name = `${prefix}-image`;
  14. let Image = class Image extends SuperComponent {
  15. constructor() {
  16. super(...arguments);
  17. this.externalClasses = [`${prefix}-class`, `${prefix}-class-load`, `${prefix}-class-image`, `${prefix}-class-error`];
  18. this.options = {
  19. multipleSlots: true,
  20. };
  21. this.properties = ImageProps;
  22. this.data = {
  23. prefix,
  24. isLoading: true,
  25. isFailed: false,
  26. innerStyle: '',
  27. classPrefix: name,
  28. };
  29. this.preSrc = undefined;
  30. this.observers = {
  31. src() {
  32. if (this.preSrc === this.properties.src)
  33. return;
  34. this.update();
  35. },
  36. 'width, height'(width, height) {
  37. this.calcSize(width, height);
  38. },
  39. };
  40. this.methods = {
  41. onLoaded(e) {
  42. const sdkVersion = appBaseInfo.SDKVersion;
  43. const { mode, tId } = this.properties;
  44. const isInCompatible = compareVersion(sdkVersion, '2.10.3') < 0;
  45. if (mode === 'heightFix' && isInCompatible) {
  46. const { height: picHeight, width: picWidth } = e.detail;
  47. getRect(this, `#${tId || 'image'}`).then((rect) => {
  48. const { height } = rect;
  49. const resultWidth = ((height / picHeight) * picWidth).toFixed(2);
  50. this.setData({ innerStyle: `height: ${addUnit(height)}; width: ${resultWidth}px;` });
  51. });
  52. }
  53. this.setData({
  54. isLoading: false,
  55. isFailed: false,
  56. });
  57. this.triggerEvent('load', e.detail);
  58. },
  59. onLoadError(e) {
  60. this.setData({
  61. isLoading: false,
  62. isFailed: true,
  63. });
  64. this.triggerEvent('error', e.detail);
  65. },
  66. calcSize(width, height) {
  67. let innerStyle = '';
  68. if (width) {
  69. innerStyle += `width: ${addUnit(width)};`;
  70. }
  71. if (height) {
  72. innerStyle += `height: ${addUnit(height)};`;
  73. }
  74. this.setData({
  75. innerStyle,
  76. });
  77. },
  78. update() {
  79. const { src } = this.properties;
  80. this.preSrc = src;
  81. if (!src) {
  82. this.onLoadError({ errMsg: '图片链接为空' });
  83. }
  84. else {
  85. this.setData({
  86. isLoading: true,
  87. isFailed: false,
  88. });
  89. }
  90. },
  91. };
  92. }
  93. };
  94. Image = __decorate([
  95. wxComponent()
  96. ], Image);
  97. export default Image;