u-image.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-image",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$13],
  6. data() {
  7. return {
  8. // 图片是否加载错误,如果是,则显示错误占位图
  9. isError: false,
  10. // 初始化组件时,默认为加载中状态
  11. loading: true,
  12. // 不透明度,为了实现淡入淡出的效果
  13. opacity: 1,
  14. // 过渡时间,因为props的值无法修改,故需要一个中间值
  15. durationTime: this.duration,
  16. // 图片加载完成时,去掉背景颜色,因为如果是png图片,就会显示灰色的背景
  17. backgroundStyle: {},
  18. // 用于fade模式的控制组件显示与否
  19. show: false
  20. };
  21. },
  22. watch: {
  23. src: {
  24. immediate: true,
  25. handler(n) {
  26. if (!n) {
  27. this.isError = true;
  28. } else {
  29. this.isError = false;
  30. this.loading = true;
  31. }
  32. }
  33. }
  34. },
  35. computed: {
  36. wrapStyle() {
  37. let style = {};
  38. style.width = this.$u.addUnit(this.width);
  39. style.height = this.$u.addUnit(this.height);
  40. style.borderRadius = this.shape == "circle" ? "10000px" : common_vendor.index.$u.addUnit(this.radius);
  41. style.overflow = this.radius > 0 ? "hidden" : "visible";
  42. return common_vendor.index.$u.deepMerge(style, common_vendor.index.$u.addStyle(this.customStyle));
  43. }
  44. },
  45. mounted() {
  46. this.show = true;
  47. },
  48. emits: ["click", "error", "load"],
  49. methods: {
  50. // 点击图片
  51. onClick() {
  52. this.$emit("click");
  53. },
  54. // 图片加载失败
  55. onErrorHandler(err) {
  56. this.loading = false;
  57. this.isError = true;
  58. this.$emit("error", err);
  59. },
  60. // 图片加载完成,标记loading结束
  61. onLoadHandler(event) {
  62. this.loading = false;
  63. this.isError = false;
  64. this.$emit("load", event);
  65. this.removeBgColor();
  66. },
  67. // 移除图片的背景色
  68. removeBgColor() {
  69. this.backgroundStyle = {
  70. backgroundColor: "transparent"
  71. };
  72. }
  73. }
  74. };
  75. if (!Array) {
  76. const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
  77. const _easycom_u_transition2 = common_vendor.resolveComponent("u-transition");
  78. (_easycom_u_icon2 + _easycom_u_transition2)();
  79. }
  80. const _easycom_u_icon = () => "../u-icon/u-icon.js";
  81. const _easycom_u_transition = () => "../u-transition/u-transition.js";
  82. if (!Math) {
  83. (_easycom_u_icon + _easycom_u_transition)();
  84. }
  85. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  86. return common_vendor.e({
  87. a: !$data.isError
  88. }, !$data.isError ? {
  89. b: _ctx.src,
  90. c: _ctx.mode,
  91. d: common_vendor.o((...args) => $options.onErrorHandler && $options.onErrorHandler(...args)),
  92. e: common_vendor.o((...args) => $options.onLoadHandler && $options.onLoadHandler(...args)),
  93. f: _ctx.showMenuByLongpress,
  94. g: _ctx.lazyLoad,
  95. h: _ctx.shape == "circle" ? "10000px" : _ctx.$u.addUnit(_ctx.radius),
  96. i: _ctx.$u.addUnit(_ctx.width),
  97. j: _ctx.$u.addUnit(_ctx.height)
  98. } : {}, {
  99. k: _ctx.showLoading && $data.loading
  100. }, _ctx.showLoading && $data.loading ? {
  101. l: common_vendor.p({
  102. name: _ctx.loadingIcon,
  103. width: _ctx.width,
  104. height: _ctx.height
  105. }),
  106. m: _ctx.shape == "circle" ? "50%" : _ctx.$u.addUnit(_ctx.radius),
  107. n: this.bgColor,
  108. o: _ctx.$u.addUnit(_ctx.width),
  109. p: _ctx.$u.addUnit(_ctx.height)
  110. } : {}, {
  111. q: _ctx.showError && $data.isError && !$data.loading
  112. }, _ctx.showError && $data.isError && !$data.loading ? {
  113. r: common_vendor.p({
  114. name: _ctx.errorIcon,
  115. width: _ctx.width,
  116. height: _ctx.height
  117. }),
  118. s: _ctx.shape == "circle" ? "50%" : _ctx.$u.addUnit(_ctx.radius),
  119. t: _ctx.$u.addUnit(_ctx.width),
  120. v: _ctx.$u.addUnit(_ctx.height)
  121. } : {}, {
  122. w: common_vendor.o((...args) => $options.onClick && $options.onClick(...args)),
  123. x: common_vendor.s($options.wrapStyle),
  124. y: common_vendor.s($data.backgroundStyle),
  125. z: common_vendor.p({
  126. mode: "fade",
  127. show: $data.show,
  128. duration: _ctx.fade ? 1e3 : 0
  129. })
  130. });
  131. }
  132. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9d58ba7c"], ["__file", "F:/兴元/开门柜项目/平台端管理系统小程序/node_modules/uview-plus/components/u-image/u-image.vue"]]);
  133. wx.createComponent(Component);