first commit
This commit is contained in:
lingxiao865
@@ -0,0 +1,187 @@
|
||||
.t-avatar-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper,
|
||||
.t-avatar-group-offset-right .t-avatar__wrapper {
|
||||
padding: var(--td-avatar-group-line-spacing, 4rpx) 0;
|
||||
}
|
||||
.t-avatar-group-offset-left-small,
|
||||
.t-avatar-group-offset-right-small {
|
||||
--td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -16rpx);
|
||||
}
|
||||
.t-avatar-group-offset-left-medium,
|
||||
.t-avatar-group-offset-right-medium {
|
||||
--td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -16rpx);
|
||||
}
|
||||
.t-avatar-group-offset-left-large,
|
||||
.t-avatar-group-offset-right-large {
|
||||
--td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -16rpx);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(1) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 1);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(2) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 2);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(3) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 3);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(4) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 4);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(5) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 5);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(6) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 6);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(7) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 7);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(8) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 8);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(9) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 9);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(10) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 10);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(11) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 11);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(12) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 12);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(13) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 13);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(14) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 14);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(15) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 15);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(16) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 16);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(17) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 17);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(18) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 18);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(19) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 19);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(20) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 20);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(21) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 21);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(22) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 22);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(23) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 23);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(24) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 24);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(25) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 25);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(26) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 26);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(27) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 27);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(28) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 28);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(29) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 29);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(30) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 30);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(31) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 31);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(32) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 32);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(33) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 33);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(34) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 34);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(35) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 35);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(36) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 36);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(37) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 37);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(38) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 38);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(39) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 39);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(40) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 40);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(41) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 41);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(42) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 42);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(43) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 43);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(44) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 44);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(45) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 45);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(46) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 46);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(47) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 47);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(48) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 48);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(49) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 49);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(50) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 50);
|
||||
}
|
||||
.t-avatar-group__collapse--slot,
|
||||
.t-avatar-group__collapse--default {
|
||||
z-index: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
.t-avatar-group__collapse--slot {
|
||||
float: left;
|
||||
}
|
||||
.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
|
||||
display: none;
|
||||
float: left;
|
||||
}
|
||||
.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="className"
|
||||
>
|
||||
<slot />
|
||||
<view :class="classPrefix + '__collapse--slot'">
|
||||
<slot name="collapse-avatar" />
|
||||
</view>
|
||||
<view
|
||||
v-if="max && max < length"
|
||||
:class="classPrefix + '__collapse--default'"
|
||||
@click="onCollapsedItemClick"
|
||||
>
|
||||
<t-avatar
|
||||
:t-class-image="prefix + '-avatar--border ' + prefix + '-avatar--border-' + size + ' ' + tClassImage"
|
||||
:t-class-content="tClassContent"
|
||||
:size="size"
|
||||
:shape="shape"
|
||||
:icon="collapseAvatar ? '' : 'user-add'"
|
||||
aria-role="none"
|
||||
>
|
||||
{{ collapseAvatar }}
|
||||
</t-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TAvatar from '../avatar/avatar';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import avatarGroupProps from './props';
|
||||
|
||||
import tools from '../common/utils.wxs';
|
||||
import { ParentMixin, RELATION_MAP } from '../common/relation';
|
||||
|
||||
|
||||
const name = `${prefix}-avatar-group`;
|
||||
const AVATAR_GROUP_INIT_Z_INDEX = 50;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-image`,
|
||||
],
|
||||
mixins: [ParentMixin(RELATION_MAP.Avatar)],
|
||||
components: {
|
||||
TAvatar,
|
||||
},
|
||||
props: {
|
||||
...avatarGroupProps,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
hasChild: true,
|
||||
length: 0,
|
||||
className: '',
|
||||
tools,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
cascading: 'setClass',
|
||||
size: 'setClass',
|
||||
},
|
||||
mounted() {
|
||||
this.setClass();
|
||||
this.length = this.children?.length || 0;
|
||||
if (this.length) {
|
||||
this.handleMax();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setClass() {
|
||||
const { cascading, size } = this;
|
||||
const direction = cascading.split('-')[0];
|
||||
const classList = [
|
||||
name,
|
||||
this.tClass,
|
||||
`${name}-offset-${direction}`,
|
||||
`${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
|
||||
];
|
||||
|
||||
this.className = classList.join(' ');
|
||||
},
|
||||
|
||||
handleMax() {
|
||||
const { max, cascading } = this;
|
||||
const len = this.children.length;
|
||||
if (!max || max > len) return;
|
||||
|
||||
const restAvatars = this.children.splice(max, len - max);
|
||||
|
||||
const isLeft = cascading === 'left-up';
|
||||
this.children.forEach((child, index) => {
|
||||
child.setStyle({
|
||||
zIndex: isLeft && `calc(var(--td-avatar-group-init-z-index, ${AVATAR_GROUP_INIT_Z_INDEX}) - ${index})`,
|
||||
padding: 'var(--td-avatar-group-line-spacing, 2px) 0',
|
||||
});
|
||||
});
|
||||
|
||||
restAvatars.forEach((child) => {
|
||||
child.hide();
|
||||
});
|
||||
},
|
||||
onCollapsedItemClick(e) {
|
||||
this.$emit('collapsed-item-click', e);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './avatar-group.css';
|
||||
</style>
|
||||
44
uni_modules/tdesign-uniapp/components/avatar-group/props.ts
Normal file
44
uni_modules/tdesign-uniapp/components/avatar-group/props.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdAvatarGroupProps } from './type';
|
||||
export default {
|
||||
/** 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上 */
|
||||
cascading: {
|
||||
type: String,
|
||||
default: 'left-up' as TdAvatarGroupProps['cascading'],
|
||||
validator(val: TdAvatarGroupProps['cascading']): boolean {
|
||||
if (!val) return true;
|
||||
return ['left-up', 'right-up'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` */
|
||||
collapseAvatar: {
|
||||
type: String,
|
||||
},
|
||||
/** 能够同时显示的最多头像数量 */
|
||||
max: {
|
||||
type: Number,
|
||||
},
|
||||
/** 形状。优先级低于 Avatar.shape */
|
||||
shape: {
|
||||
type: String,
|
||||
validator(val: TdAvatarGroupProps['shape']): boolean {
|
||||
if (!val) return true;
|
||||
return ['circle', 'round'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size */
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 点击头像折叠元素触发 */
|
||||
onCollapsedItemClick: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
};
|
||||
38
uni_modules/tdesign-uniapp/components/avatar-group/type.ts
Normal file
38
uni_modules/tdesign-uniapp/components/avatar-group/type.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { ShapeEnum } from '../common/common';
|
||||
|
||||
export interface TdAvatarGroupProps {
|
||||
/**
|
||||
* 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上
|
||||
* @default 'left-up'
|
||||
*/
|
||||
cascading?: CascadingValue;
|
||||
/**
|
||||
* 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`
|
||||
*/
|
||||
collapseAvatar?: string;
|
||||
/**
|
||||
* 能够同时显示的最多头像数量
|
||||
*/
|
||||
max?: number;
|
||||
/**
|
||||
* 形状。优先级低于 Avatar.shape
|
||||
*/
|
||||
shape?: ShapeEnum;
|
||||
/**
|
||||
* 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size
|
||||
* @default ''
|
||||
*/
|
||||
size?: string;
|
||||
/**
|
||||
* 点击头像折叠元素触发
|
||||
*/
|
||||
onCollapsedItemClick?: (e: MouseEvent) => void;
|
||||
}
|
||||
|
||||
export type CascadingValue = 'left-up' | 'right-up';
|
||||
Reference in New Issue
Block a user