u-avatar-group.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view class="u-avatar-group">
  3. <view
  4. class="u-avatar-group__item"
  5. v-for="(item, index) in showUrl"
  6. :key="index"
  7. :style="{
  8. marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap)
  9. }"
  10. >
  11. <u-avatar
  12. :size="size"
  13. :shape="shape"
  14. :mode="mode"
  15. :src="$u.test.object(item) ? keyName && item[keyName] || item.url : item"
  16. ></u-avatar>
  17. <view
  18. class="u-avatar-group__item__show-more"
  19. v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
  20. @tap="clickHandler"
  21. >
  22. <u--text
  23. color="#ffffff"
  24. :size="size * 0.4"
  25. :text="`+${extraValue || urls.length - showUrl.length}`"
  26. align="center"
  27. customStyle="justify-content: center"
  28. ></u--text>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. import props from './props.js';
  35. /**
  36. * AvatarGroup 头像组
  37. * @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
  38. * @tutorial https://www.uviewui.com/components/avatar.html
  39. *
  40. * @property {Array} urls 头像图片组 (默认 [] )
  41. * @property {String | Number} maxCount 最多展示的头像数量 ( 默认 5 )
  42. * @property {String} shape 头像形状( 'circle' (默认) | 'square'
  43. * @property {String} mode 图片裁剪模式(默认 'scaleToFill'
  44. * @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true
  45. * @property {String | Number} size 头像大小 (默认 40 )
  46. * @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
  47. * @property {String | Number} gap 头像之间的遮挡比例(0.4代表遮挡40%) (默认 0.5 )
  48. * @property {String | Number} extraValue 需额外显示的值
  49. * @event {Function} showMore 头像组更多点击
  50. * @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
  51. */
  52. export default {
  53. name: 'u-avatar-group',
  54. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  55. data() {
  56. return {
  57. }
  58. },
  59. computed: {
  60. showUrl() {
  61. return this.urls.slice(0, this.maxCount)
  62. }
  63. },
  64. methods: {
  65. clickHandler() {
  66. this.$emit('showMore')
  67. }
  68. },
  69. }
  70. </script>
  71. <style lang="scss" scoped>
  72. @import "../../libs/css/components.scss";
  73. .u-avatar-group {
  74. @include flex;
  75. &__item {
  76. margin-left: -10px;
  77. position: relative;
  78. &--no-indent {
  79. // 如果你想质疑作者不会使用:first-child,说明你太年轻,因为nvue不支持
  80. margin-left: 0;
  81. }
  82. &__show-more {
  83. position: absolute;
  84. top: 0;
  85. bottom: 0;
  86. left: 0;
  87. right: 0;
  88. background-color: rgba(0, 0, 0, 0.3);
  89. @include flex;
  90. align-items: center;
  91. justify-content: center;
  92. border-radius: 100px;
  93. }
  94. }
  95. }
  96. </style>