学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

103 lines
2.9 KiB

1 year ago
  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>