index.js 2.5 KB

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