From da25434b85fc5b4321c429bf95e719d00ec395bb Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 11 Jan 2024 16:21:16 +0800
Subject: [PATCH] 定位优化
---
uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 103 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue b/uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue
new file mode 100644
index 0000000..7e996d7
--- /dev/null
+++ b/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.8.0