From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 103 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue b/minipro_standard/uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue
new file mode 100644
index 0000000..7e996d7
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue
@@ -0,0 +1,103 @@
+<template>
+ <view class="u-avatar-group">
+ <view
+ class="u-avatar-group__item"
+ v-for="(item, index) in showUrl"
+ :key="index"
+ :style="{
+ marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap)
+ }"
+ >
+ <u-avatar
+ :size="size"
+ :shape="shape"
+ :mode="mode"
+ :src="$u.test.object(item) ? keyName && item[keyName] || item.url : item"
+ ></u-avatar>
+ <view
+ class="u-avatar-group__item__show-more"
+ v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
+ @tap="clickHandler"
+ >
+ <u--text
+ color="#ffffff"
+ :size="size * 0.4"
+ :text="`+${extraValue || urls.length - showUrl.length}`"
+ align="center"
+ customStyle="justify-content: center"
+ ></u--text>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * AvatarGroup 澶村儚缁�
+ * @description 鏈粍浠朵竴鑸敤浜庡睍绀哄ご鍍忕殑鍦版柟锛屽涓汉涓績锛屾垨鑰呰瘎璁哄垪琛ㄩ〉鐨勭敤鎴峰ご鍍忓睍绀虹瓑鍦烘墍銆�
+ * @tutorial https://www.uviewui.com/components/avatar.html
+ *
+ * @property {Array} urls 澶村儚鍥剧墖缁� 锛堥粯璁� [] 锛�
+ * @property {String | Number} maxCount 鏈�澶氬睍绀虹殑澶村儚鏁伴噺 锛� 榛樿 5 锛�
+ * @property {String} shape 澶村儚褰㈢姸锛� 'circle' (榛樿) | 'square' 锛�
+ * @property {String} mode 鍥剧墖瑁佸壀妯″紡锛堥粯璁� 'scaleToFill' 锛�
+ * @property {Boolean} showMore 瓒呭嚭maxCount鏃舵槸鍚︽樉绀烘煡鐪嬫洿澶氱殑鎻愮ず 锛堥粯璁� true 锛�
+ * @property {String | Number} size 澶村儚澶у皬 锛堥粯璁� 40 锛�
+ * @property {String} keyName 鎸囧畾浠庢暟缁勭殑瀵硅薄鍏冪礌涓鍙栧摢涓睘鎬т綔涓哄浘鐗囧湴鍧�
+ * @property {String | Number} gap 澶村儚涔嬮棿鐨勯伄鎸℃瘮渚嬶紙0.4浠ｈ〃閬尅40%锛� 锛堥粯璁� 0.5 锛�
+ * @property {String | Number} extraValue 闇�棰濆鏄剧ず鐨勫��
+ * @event {Function} showMore 澶村儚缁勬洿澶氱偣鍑�
+ * @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
+ */
+ export default {
+ name: 'u-avatar-group',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+
+ }
+ },
+ computed: {
+ showUrl() {
+ return this.urls.slice(0, this.maxCount)
+ }
+ },
+ methods: {
+ clickHandler() {
+ this.$emit('showMore')
+ }
+ },
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-avatar-group {
+ @include flex;
+
+ &__item {
+ margin-left: -10px;
+ position: relative;
+
+ &--no-indent {
+ // 濡傛灉浣犳兂璐ㄧ枒浣滆�呬笉浼氫娇鐢�:first-child锛岃鏄庝綘澶勾杞伙紝鍥犱负nvue涓嶆敮鎸�
+ margin-left: 0;
+ }
+
+ &__show-more {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.3);
+ @include flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 100px;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3