index.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { addUnit, isDef } from '../common/utils';
  2. import { VantComponent } from '../common/component';
  3. import { button } from '../mixins/button';
  4. import { openType } from '../mixins/open-type';
  5. const FIT_MODE_MAP = {
  6. none: 'center',
  7. fill: 'scaleToFill',
  8. cover: 'aspectFill',
  9. contain: 'aspectFit',
  10. widthFix: 'widthFix',
  11. heightFix: 'heightFix',
  12. };
  13. VantComponent({
  14. mixins: [button, openType],
  15. classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
  16. props: {
  17. src: {
  18. type: String,
  19. observer() {
  20. this.setData({
  21. error: false,
  22. loading: true,
  23. });
  24. },
  25. },
  26. round: Boolean,
  27. width: {
  28. type: null,
  29. observer: 'setStyle',
  30. },
  31. height: {
  32. type: null,
  33. observer: 'setStyle',
  34. },
  35. radius: null,
  36. lazyLoad: Boolean,
  37. useErrorSlot: Boolean,
  38. useLoadingSlot: Boolean,
  39. showMenuByLongpress: Boolean,
  40. fit: {
  41. type: String,
  42. value: 'fill',
  43. observer: 'setMode',
  44. },
  45. showError: {
  46. type: Boolean,
  47. value: true,
  48. },
  49. showLoading: {
  50. type: Boolean,
  51. value: true,
  52. },
  53. },
  54. data: {
  55. error: false,
  56. loading: true,
  57. viewStyle: '',
  58. },
  59. mounted() {
  60. this.setMode();
  61. this.setStyle();
  62. },
  63. methods: {
  64. setMode() {
  65. this.setData({
  66. mode: FIT_MODE_MAP[this.data.fit],
  67. });
  68. },
  69. setStyle() {
  70. const { width, height, radius } = this.data;
  71. let style = '';
  72. if (isDef(width)) {
  73. style += `width: ${addUnit(width)};`;
  74. }
  75. if (isDef(height)) {
  76. style += `height: ${addUnit(height)};`;
  77. }
  78. if (isDef(radius)) {
  79. style += 'overflow: hidden;';
  80. style += `border-radius: ${addUnit(radius)};`;
  81. }
  82. this.setData({ viewStyle: style });
  83. },
  84. onLoad(event) {
  85. this.setData({
  86. loading: false,
  87. });
  88. this.$emit('load', event.detail);
  89. },
  90. onError(event) {
  91. this.setData({
  92. loading: false,
  93. error: true,
  94. });
  95. this.$emit('error', event.detail);
  96. },
  97. onClick(event) {
  98. this.$emit('click', event.detail);
  99. },
  100. },
  101. });