index.js 2.4 KB

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