image.js 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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. const { prefix } = config;
  11. const name = `${prefix}-image`;
  12. let Image = class Image extends SuperComponent {
  13. constructor() {
  14. super(...arguments);
  15. this.externalClasses = ['t-class', 't-class-load'];
  16. this.options = {
  17. multipleSlots: true,
  18. };
  19. this.properties = ImageProps;
  20. this.data = {
  21. prefix,
  22. isLoading: true,
  23. isFailed: false,
  24. widthStyle: '',
  25. classPrefix: name,
  26. };
  27. this.preSrc = '';
  28. this.lifetimes = {
  29. attached() {
  30. this.update();
  31. },
  32. };
  33. this.observers = {
  34. src() {
  35. if (this.preSrc === this.properties.src)
  36. return;
  37. this.update();
  38. },
  39. };
  40. this.methods = {
  41. onLoaded(e) {
  42. const sdkVersion = wx.getSystemInfoSync().SDKVersion;
  43. const versionArray = sdkVersion.split('.').map((v) => parseInt(v, 10));
  44. const { mode } = this.properties;
  45. const isInCompatible = versionArray[0] < 2 ||
  46. (versionArray[0] === 2 && versionArray[1] < 10) ||
  47. (versionArray[0] === 2 && versionArray[1] === 10 && versionArray[2] < 3);
  48. if (mode === 'heightFix' && isInCompatible) {
  49. const { height: picHeight, width: picWidth } = e.detail;
  50. const query = this.createSelectorQuery();
  51. query
  52. .select('#image')
  53. .boundingClientRect((res) => {
  54. const { height } = res;
  55. const resultWidth = ((height / picHeight) * picWidth).toFixed(2);
  56. this.setData({ widthStyle: `width: ${resultWidth}px;` });
  57. })
  58. .exec();
  59. }
  60. this.setData({
  61. isLoading: false,
  62. isFailed: false,
  63. });
  64. this.triggerEvent('load', e.detail);
  65. },
  66. onLoadError(e) {
  67. this.setData({
  68. isLoading: false,
  69. isFailed: true,
  70. });
  71. this.triggerEvent('error', e.detail);
  72. },
  73. update() {
  74. const { src } = this.properties;
  75. this.preSrc = src;
  76. if (!src) {
  77. this.onLoadError({ errMsg: '图片链接为空' });
  78. }
  79. else {
  80. this.setData({
  81. isLoading: true,
  82. isFailed: false,
  83. });
  84. }
  85. },
  86. };
  87. }
  88. };
  89. Image = __decorate([
  90. wxComponent()
  91. ], Image);
  92. export default Image;