lingxiao/mini-yu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
uni_modules/tdesign-uniapp/components/avatar/README.en-US.md Normal file
View File

@@ -0,0 +1,102 @@
:: BASE_DOC ::
## API
### Avatar Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
alt | String | - | show it when url is not valid | N
badge-props | Object | {} | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
bordered | Boolean | false | \- | N
hide-on-load-failed | Boolean | false | hide image when loading image failed | N
icon | String / Object | - | \- | N
image | String | - | images url | N
image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
size | String | - | size | N
### Avatar Events
name | params | description
-- | -- | --
error | `(e: Event)` | trigger on image load failed
### Avatar Slots
name | Description
-- | --
\- | \-
### Avatar External Classes
className | Description
-- | --
t-class | \-
t-class-alt | \-
t-class-content | \-
t-class-icon | \-
t-class-image | \-
### AvatarGroup Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
cascading | String | 'left-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar-group/type.ts) | N
collapse-avatar | String | - | \- | N
max | Number | - | \- | N
shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
size | String | - | size | N
### AvatarGroup Events
name | params | description
-- | -- | --
collapsed-item-click | `(e: MouseEvent)` | \-
### AvatarGroup Slots
name | Description
-- | --
\- | \-
collapse-avatar | \-
### AvatarGroup External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-image | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
--td-avatar-icon-medium-font-size | 48rpx | -
--td-avatar-icon-small-font-size | 40rpx | -
--td-avatar-large-width | 128rpx | -
--td-avatar-margin-left | 0 | -
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -

152
uni_modules/tdesign-uniapp/components/avatar/README.md Normal file
View File

@@ -0,0 +1,152 @@
---
title: Avatar 头像
description: 用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
spline: data
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TAvatar from '@tdesign/uniapp/avatar/avatar.vue';
import TAvatarGroup from '@tdesign/uniapp/avatar-group/avatar-group.vue';
```
### 头像类型
图片头像
{{ image-avatar }}
字符头像
{{ character-avatar }}
图标头像
{{ icon-avatar }}
徽标头像
{{ badge-avatar }}
### 组合头像
纯展示
{{ exhibition }}
带操作
{{ action }}
### 头像尺寸
头像 large/medium/small 尺寸
{{ size }}
## API
### Avatar Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
badge-props | Object | {} | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
bordered | Boolean | false | 已废弃。是否显示外边框 | N
hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
image | String | - | 图片地址 | N
image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 | N
### Avatar Events
名称 | 参数 | 描述
-- | -- | --
error | `(e: Event)` | 图片加载失败时触发
### Avatar Slots
名称 | 描述
-- | --
\- | 默认插槽，自定义内容区域内容
### Avatar External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-alt | 替代文本样式类
t-class-content | 内容样式类
t-class-icon | 图标样式类
t-class-image | 图片样式类
### AvatarGroup Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
cascading | String | 'left-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar-group/type.ts) | N
collapse-avatar | String | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N
max | Number | - | 能够同时显示的最多头像数量 | N
shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
### AvatarGroup Events
名称 | 参数 | 描述
-- | -- | --
collapsed-item-click | `(e: MouseEvent)` | 点击头像折叠元素触发
### AvatarGroup Slots
名称 | 描述
-- | --
\- | 默认插槽，自定义内容区域内容
collapse-avatar | 自定义 `collapse-avatar` 显示内容
### AvatarGroup External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-image | 图片样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
--td-avatar-icon-medium-font-size | 48rpx | -
--td-avatar-icon-small-font-size | 40rpx | -
--td-avatar-large-width | 128rpx | -
--td-avatar-margin-left | 0 | -
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -

77
uni_modules/tdesign-uniapp/components/avatar/avatar.css Normal file
View File

@@ -0,0 +1,77 @@
.t-avatar {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-avatar__wrapper {
display: inline-flex;
position: relative;
vertical-align: top;
margin-left: var(--td-avatar-margin-left, 0);
}
.t-avatar--large {
width: var(--td-avatar-large-width, 128rpx);
height: var(--td-avatar-large-width, 128rpx);
font-size: var(--td-avatar-text-large-font-size, var(--td-font-size-xl, 40rpx));
}
.t-avatar--large .t-avatar__icon {
font-size: var(--td-avatar-icon-large-font-size, 64rpx);
}
.t-avatar--medium {
width: var(--td-avatar-medium-width, 96rpx);
height: var(--td-avatar-medium-width, 96rpx);
font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-m, 32rpx));
}
.t-avatar--medium .t-avatar__icon {
font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
}
.t-avatar--small {
width: var(--td-avatar-small-width, 80rpx);
height: var(--td-avatar-small-width, 80rpx);
font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-base, 28rpx));
}
.t-avatar--small .t-avatar__icon {
font-size: var(--td-avatar-icon-small-font-size, 40rpx);
}
.t-avatar .t-image,
.t-avatar__image {
width: 100%;
height: 100%;
}
.t-avatar--circle {
border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
overflow: hidden;
}
.t-avatar--round {
border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
overflow: hidden;
}
.t-avatar__text,
.t-avatar__icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.t-avatar__text:empty,
.t-avatar__icon:empty {
width: 0;
height: 0;
}
.t-avatar--border {
border-color: var(--td-avatar-border-color, #fff);
border-style: solid;
}
.t-avatar--border-small {
border-width: var(--td-avatar-border-width-small, 2rpx);
}
.t-avatar--border-medium {
border-width: var(--td-avatar-border-width-medium, 4rpx);
}
.t-avatar--border-large {
border-width: var(--td-avatar-border-width-large, 6rpx);
}

200
uni_modules/tdesign-uniapp/components/avatar/avatar.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<view
:class="[
classPrefix + '__wrapper',
tClass
]"
:style="tools._style([utils.getStyles(isShow), customStyle, innerStyle])"
>
<t-badge
v-if="badgeProps"
:color="badgeProps.color || ''"
:content="badgeProps.content || ''"
:count="badgeProps.count || 0"
:dot="badgeProps.dot || false"
:max-count="badgeProps.maxCount || 99"
:offset="badgeProps.offset || []"
:shape="badgeProps.shape || 'circle'"
:show-zero="badgeProps.showZero || false"
:size="badgeProps.size || 'medium'"
:t-class="badgeProps.tClass"
:t-class-content="badgeProps.tClassContent"
:t-class-count="badgeProps.tClassCount"
>
<view
:class="[
utils.getClass(classPrefix, dataSize || 'medium', dataShape, dataBordered),
tClassImage
]"
:style="utils.getSize(dataSize, windowWidth)"
:aria-label="ariaLabel || alt || '头像'"
:aria-role="ariaRole || 'img'"
:aria-hidden="ariaHidden"
>
<t-image
v-if="image"
:t-class="prefix + '-image ' + classPrefix + '__image'"
:t-class-load="tClassAlt"
:custom-style="imageCustomStyle"
style="width: 100%;height: 100%;"
:src="image"
:mode="(imageProps && imageProps.mode) || 'aspectFill'"
:lazy="(imageProps && imageProps.lazy) || false"
:loading="(imageProps && imageProps.loading) || 'default'"
:shape="(imageProps && imageProps.shape) || 'round'"
:webp="(imageProps && imageProps.webp) || false"
:error="alt || 'default'"
@error="onLoadError"
/>
<block
v-else-if="iconName || tools.isNoEmptyObj(iconData)"
name="icon"
>
<t-icon
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ') + tClassIcon"
:prefix="iconData.prefix"
:name="iconName || iconData.name"
:size="iconData.size"
:color="iconData.color"
:aria-hidden="!!iconData.ariaHidden"
:aria-label="iconData.ariaLabel"
:aria-role="iconData.ariaRole"
:custom-style="iconCustomStyle"
@click="iconData.click || ''"
/>
</block>
<view
v-else
:class="[
classPrefix + '__text ',
tClassContent
]"
>
<slot />
</view>
</view>
</t-badge>
</view>
</template>
<script>
import TIcon from '../icon/icon';
import TBadge from '../badge/badge';
import TImage from '../image/image';
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import avatarProps from './props';
import { setIcon, systemInfo } from '../common/utils';
import tools from '../common/utils.wxs';
import * as utils from './computed.js';
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
const name = `${prefix}-avatar`;
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
externalClasses: [
`${prefix}-class`,
`${prefix}-class-image`,
`${prefix}-class-icon`,
`${prefix}-class-alt`,
`${prefix}-class-content`,
],
mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
components: {
TIcon,
TBadge,
TImage,
},
props: {
...avatarProps,
},
data() {
return {
prefix,
classPrefix: name,
isShow: true,
zIndex: 0,
windowWidth: systemInfo.windowWidth,
utils,
tools,
iconName: '',
iconData: {},
dataShape: this.shape,
dataSize: this.size,
dataBordered: this.bordered,
innerStyle: '',
};
},
computed: {
iconCustomStyle() {
const fontSize = {
small: 'var(--td-avatar-icon-small-font-size, 20px)',
medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
large: 'var(--td-avatar-icon-large-font-size, 32px)',
};
if (!fontSize[this.dataSize]) return '';
return tools._style([
{
fontSize: fontSize[this.dataSize],
},
this.iconData.style || '',
]);
},
imageCustomStyle() {
return tools._style([
{
width: '100%',
height: '100%',
},
this.imageProps?.style || '',
]);
},
},
watch: {
icon: {
handler(t) {
const obj = setIcon('icon', t, '');
Object.keys(obj).forEach((key) => {
this[key] = obj[key];
});
},
immediate: true,
},
},
mounted() {
},
methods: {
innerAfterLinked() {
this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
this.dataBordered = true;
},
hide() {
this.isShow = false;
},
onLoadError(e) {
if (this.hideOnLoadFailed) {
this.isShow = false;
}
this.$emit('error', e && e.e);
},
setStyle(val = '') {
this.innerStyle = val;
},
},
});
</script>
<style scoped>
@import './avatar.css';
</style>

30
uni_modules/tdesign-uniapp/components/avatar/computed.js Normal file
View File

@@ -0,0 +1,30 @@
import { getRegExp } from '../common/runtime/wxs-polyfill';
export function getClass(classPrefix, size, shape, bordered) {
const hasPx = (size || '').indexOf('px') > -1;
const borderSize = hasPx ? 'medium' : size;
const classNames = [
classPrefix,
classPrefix + (shape === 'round' ? '--round' : '--circle'),
bordered ? `${classPrefix}--border ${classPrefix}--border-${borderSize}` : '',
hasPx ? '' : `${classPrefix}--${size}`,
];
return classNames.join(' ');
}
export function getSize(size = 'medium', windowWidth) {
const res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
if (res && res.length >= 3) {
let px = res[1];
if (res[2] === 'rpx') {
px = Math.floor((windowWidth * res[1]) / 750);
}
return `width:${size};height:${size};font-size:${(px / 8) * 3 + 2}px`;
}
}
export function getStyles(isShow) {
return isShow ? '' : 'display: none;';
}

54
uni_modules/tdesign-uniapp/components/avatar/props.ts Normal file
View File

@@ -0,0 +1,54 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdAvatarProps } from './type';
export default {
/** 头像替换文本，仅当图片加载失败时有效 */
alt: {
type: String,
default: '',
},
/** 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字 */
badgeProps: {
type: Object,
default: () => ({}),
},
/** 已废弃。是否显示外边框 */
bordered: Boolean,
/** 加载失败时隐藏图片 */
hideOnLoadFailed: Boolean,
/** 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
icon: {
type: [String, Object],
},
/** 图片地址 */
image: {
type: String,
default: '',
},
/** 透传至 Image 组件 */
imageProps: {
type: Object,
},
/** 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定 */
shape: {
type: String,
validator(val: TdAvatarProps['shape']): boolean {
if (!val) return true;
return ['circle', 'round'].includes(val);
},
},
/** 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 */
size: {
type: String,
default: '',
},
/** 图片加载失败时触发 */
onError: {
type: Function,
default: () => ({}),
},
};

58
uni_modules/tdesign-uniapp/components/avatar/type.ts Normal file
View File

@@ -0,0 +1,58 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdBadgeProps as BadgeProps } from '../badge/type';
import type { TdImageProps as ImageProps } from '../image/type';
import type { ShapeEnum } from '../common/common';
export interface TdAvatarProps {
/**
* 头像替换文本，仅当图片加载失败时有效
* @default ''
*/
alt?: string;
/**
* 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字
* @default {}
*/
badgeProps?: BadgeProps;
/**
* 已废弃。是否显示外边框
* @default false
*/
bordered?: boolean;
/**
* 加载失败时隐藏图片
* @default false
*/
hideOnLoadFailed?: boolean;
/**
* 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
*/
icon?: string | object;
/**
* 图片地址
* @default ''
*/
image?: string;
/**
* 透传至 Image 组件
*/
imageProps?: ImageProps;
/**
* 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定
*/
shape?: ShapeEnum;
/**
* 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定
* @default ''
*/
size?: string;
/**
* 图片加载失败时触发
*/
onError?: (e: Event) => void;
}