u-avatar.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const base64Avatar = "data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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";
  4. const _sfc_main = {
  5. name: "u-avatar",
  6. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$3],
  7. data() {
  8. return {
  9. // 如果配置randomBgColor参数为true,在图标或者文字的模式下,会随机从中取出一个颜色值当做背景色
  10. colors: [
  11. "#ffb34b",
  12. "#f2bba9",
  13. "#f7a196",
  14. "#f18080",
  15. "#88a867",
  16. "#bfbf39",
  17. "#89c152",
  18. "#94d554",
  19. "#f19ec2",
  20. "#afaae4",
  21. "#e1b0df",
  22. "#c38cc1",
  23. "#72dcdc",
  24. "#9acdcb",
  25. "#77b1cc",
  26. "#448aca",
  27. "#86cefa",
  28. "#98d1ee",
  29. "#73d1f1",
  30. "#80a7dc"
  31. ],
  32. avatarUrl: this.src,
  33. allowMp: false
  34. };
  35. },
  36. watch: {
  37. // 监听头像src的变化,赋值给内部的avatarUrl变量,因为图片加载失败时,需要修改图片的src为默认值
  38. // 而组件内部不能直接修改props的值,所以需要一个中间变量
  39. src: {
  40. immediate: true,
  41. handler(newVal) {
  42. this.avatarUrl = newVal;
  43. if (!newVal) {
  44. this.errorHandler();
  45. }
  46. }
  47. }
  48. },
  49. computed: {
  50. imageStyle() {
  51. const style = {};
  52. return style;
  53. }
  54. },
  55. created() {
  56. this.init();
  57. },
  58. emits: ["click"],
  59. methods: {
  60. addStyle: common_vendor.addStyle,
  61. addUnit: common_vendor.addUnit,
  62. random: common_vendor.random,
  63. init() {
  64. this.allowMp = true;
  65. },
  66. // 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
  67. isImg() {
  68. return this.src.indexOf("/") !== -1;
  69. },
  70. // 图片加载时失败时触发
  71. errorHandler() {
  72. this.avatarUrl = this.defaultUrl || base64Avatar;
  73. },
  74. clickHandler() {
  75. this.$emit("click", this.name);
  76. }
  77. }
  78. };
  79. if (!Array) {
  80. const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
  81. const _easycom_up_text2 = common_vendor.resolveComponent("up-text");
  82. (_easycom_u_icon2 + _easycom_up_text2)();
  83. }
  84. const _easycom_u_icon = () => "../u-icon/u-icon.js";
  85. const _easycom_up_text = () => "../u-text/u-text.js";
  86. if (!Math) {
  87. (_easycom_u_icon + _easycom_up_text)();
  88. }
  89. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  90. return common_vendor.e({
  91. a: _ctx.mpAvatar && $data.allowMp
  92. }, _ctx.mpAvatar && $data.allowMp ? {
  93. b: common_vendor.s({
  94. width: $options.addUnit(_ctx.size),
  95. height: $options.addUnit(_ctx.size)
  96. })
  97. } : {}, {
  98. c: _ctx.mpAvatar && $data.allowMp
  99. }, _ctx.mpAvatar && $data.allowMp ? {} : _ctx.icon ? {
  100. e: common_vendor.p({
  101. name: _ctx.icon,
  102. size: _ctx.fontSize,
  103. color: _ctx.color
  104. })
  105. } : _ctx.text ? {
  106. g: common_vendor.p({
  107. text: _ctx.text,
  108. size: _ctx.fontSize,
  109. color: _ctx.color,
  110. align: "center",
  111. customStyle: "justify-content: center"
  112. })
  113. } : {
  114. h: common_vendor.n(`u-avatar__image--${_ctx.shape}`),
  115. i: $data.avatarUrl || _ctx.defaultUrl,
  116. j: _ctx.mode,
  117. k: common_vendor.o((...args) => $options.errorHandler && $options.errorHandler(...args)),
  118. l: common_vendor.s({
  119. width: $options.addUnit(_ctx.size),
  120. height: $options.addUnit(_ctx.size)
  121. })
  122. }, {
  123. d: _ctx.icon,
  124. f: _ctx.text,
  125. m: common_vendor.n(`u-avatar--${_ctx.shape}`),
  126. n: common_vendor.s({
  127. backgroundColor: _ctx.text || _ctx.icon ? _ctx.randomBgColor ? $data.colors[_ctx.colorIndex !== "" ? _ctx.colorIndex : $options.random(0, 19)] : _ctx.bgColor : "transparent",
  128. width: $options.addUnit(_ctx.size),
  129. height: $options.addUnit(_ctx.size)
  130. }),
  131. o: common_vendor.s($options.addStyle(_ctx.customStyle)),
  132. p: common_vendor.o((...args) => $options.clickHandler && $options.clickHandler(...args))
  133. });
  134. }
  135. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-14a988f2"], ["__file", "D:/project/学吧/learn_applet/node_modules/uview-plus/components/u-avatar/u-avatar.vue"]]);
  136. wx.createComponent(Component);