diff --git a/example/pages/avatar/avatar.less b/example/pages/avatar/avatar.less index cb69f3a5d..14fa1fbf3 100644 --- a/example/pages/avatar/avatar.less +++ b/example/pages/avatar/avatar.less @@ -14,12 +14,6 @@ page { width: 100%; margin: 20rpx 0; - .default-user { - background-color: #e7e7e7; - color: #c5c5c5; - font-size: 60rpx; - } - .avatar-example { text-align: center; font-size: 24rpx; @@ -65,80 +59,32 @@ page { text-align: center; } - .alt-example { - color: #fff; - background-color: #0052d9; - font-weight: 400; - } - - .alt-example1 { + .font-size-20 { font-size: 40rpx; } - .alt-example2 { - font-size: 32rpx; - } - - .alt-example3 { - font-size: 32rpx; - } - - .alt-example4 { - font-size: 24rpx; - } - - .alt-example5 { - font-size: 24rpx; - } - - .border-example-show, - .border-example-operate { - font-size: 46rpx; - - .small { - margin-right: -12rpx; - } - - .img-small { - background-color: #e7e7e7; - font-size: 36rpx; - border: 4rpx solid white; - box-sizing: border-box; - } - - .medium { - margin-right: -16rpx; + .border-size { + &-2 { + border: 4rpx solid #fff; } - .img-medium { - background-color: #e7e7e7; - border: 6rpx solid white; - box-sizing: border-box; - font-size: 48rpx; + &-3 { + border: 6rpx solid #fff; } - .large { - margin-right: -16rpx; - font-size: 54rpx; - } - - .img-large { - background-color: #e7e7e7; - border: 8rpx solid white; - box-sizing: border-box; + &-4 { + border: 8rpx solid #fff; } } - .border-example-3 { - background-color: #e7e7e7; - border: 4rpx solid white; - box-sizing: border-box; + .excursion-right-8 { + margin-right: -16rpx; } - .icon-example { - background-color: #e5e5e5; - color: #bbb; - font-size: 40rpx; + .alt-example { + color: #fff; + background-color: #0052d9; + font-weight: 400; } } diff --git a/example/pages/avatar/avatar.ts b/example/pages/avatar/avatar.ts index c60909db2..244719148 100644 --- a/example/pages/avatar/avatar.ts +++ b/example/pages/avatar/avatar.ts @@ -1,19 +1,19 @@ Page({ data: { pics6: [ - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-1.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-2.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-3.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-4.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-5.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-5.jpg', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png', ], pics: [ - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-1.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-2.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-3.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-4.jpg', - 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-5.jpg', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/4.png', + 'https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/5.png', ], }, onAddTap() { diff --git a/example/pages/avatar/avatar.wxml b/example/pages/avatar/avatar.wxml index 66a121562..9ee0eb3c9 100644 --- a/example/pages/avatar/avatar.wxml +++ b/example/pages/avatar/avatar.wxml @@ -4,25 +4,25 @@ - + 默认 - + 用户 - + 圆形 - + 方形 - + 自定义文字 @@ -38,16 +38,16 @@ max="5" collapseAvatar="+5" size="small" - class="border-example-show" + t-class-image="border-size-2" > @@ -57,15 +57,15 @@ cascading="left-up" collapseAvatar="+5" size="40px" - class="border-example-show" + t-class-image="border-size-3" > @@ -75,15 +75,15 @@ cascading="left-up" collapseAvatar="+5" size="medium" - class="border-example-show" + t-class-image="border-size-4" > @@ -92,44 +92,43 @@ - + - + @@ -137,22 +136,21 @@ - + @@ -163,46 +161,46 @@ L - + M - + S - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -211,11 +209,11 @@ - + - + diff --git a/src/avatar/README.md b/src/avatar/README.md index 245a23ad1..419845fca 100644 --- a/src/avatar/README.md +++ b/src/avatar/README.md @@ -26,7 +26,7 @@ isComponent: true ```html - + @@ -132,6 +132,6 @@ error | - | 图片加载失败时触发 -- | -- | -- | -- | -- cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N -external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | N +external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-alt']` | N max | Number | - | 能够同时显示的最多头像数量 | N size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N diff --git a/src/avatar/avatar-group-props.ts b/src/avatar/avatar-group-props.ts index 4ad3079fc..319e30e35 100644 --- a/src/avatar/avatar-group-props.ts +++ b/src/avatar/avatar-group-props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-24 10:58:05 * */ import { TdAvatarGroupProps } from './type'; diff --git a/src/avatar/avatar-group.less b/src/avatar/avatar-group.less index fc4ad9479..c7184ccfb 100644 --- a/src/avatar/avatar-group.less +++ b/src/avatar/avatar-group.less @@ -52,14 +52,20 @@ display: none; } - .border-example-1 { - border-width: 4rpx; - border-color: white; - } + .alt-default { + background-color: #d4e3fc; + color: #0052d9; + + &-l { + font-size: 64rpx; + } - .alt-example { - background-color: #e5e5e5; - color: #bbb; - font-size: 30rpx; + &-m { + font-size: 48rpx; + } + + &-s { + font-size: 32rpx; + } } } diff --git a/src/avatar/avatar-group.ts b/src/avatar/avatar-group.ts index 2ab965de9..b4aa28710 100644 --- a/src/avatar/avatar-group.ts +++ b/src/avatar/avatar-group.ts @@ -7,7 +7,7 @@ const name = `${prefix}-avatar-group`; @wxComponent() export default class AvatarGroup extends SuperComponent { - externalClasses = [`${prefix}-class`]; + externalClasses = [`${prefix}-class`, `${prefix}-class-alt`, `${prefix}-class-image`]; properties = avatarGroupProps; diff --git a/src/avatar/avatar-group.wxml b/src/avatar/avatar-group.wxml index 5ef9cd888..3d18d1003 100644 --- a/src/avatar/avatar-group.wxml +++ b/src/avatar/avatar-group.wxml @@ -13,8 +13,8 @@ diff --git a/src/avatar/avatar-group.wxs b/src/avatar/avatar-group.wxs index b50be9811..8bbb6bcd3 100644 --- a/src/avatar/avatar-group.wxs +++ b/src/avatar/avatar-group.wxs @@ -11,7 +11,6 @@ module.exports = { } }, getZIndex: function (cascading) { - console.log(cascading); var zIndex = cascading === 'right-up' ? 100 : 0; return 'z-index:' + zIndex + ';'; }, diff --git a/src/avatar/avatar.less b/src/avatar/avatar.less index 3f419dc01..a7cfcd3c6 100644 --- a/src/avatar/avatar.less +++ b/src/avatar/avatar.less @@ -8,12 +8,14 @@ justify-content: center; box-sizing: border-box; overflow: hidden; - border: 0 solid; border-radius: 999rpx; &__wrapper { float: left; position: relative; + background-color: #d4e3fc; + color: #0052d9; + border-radius: 999rpx; @{prefix}-badge { position: absolute; @@ -78,4 +80,18 @@ justify-content: center; border-radius: 999rpx; } + + &__icon--default { + &-l { + font-size: 64rpx; + } + + &-m { + font-size: 48rpx; + } + + &-s { + font-size: 32rpx; + } + } } diff --git a/src/avatar/avatar.wxml b/src/avatar/avatar.wxml index 5cce4270e..b6308cd7b 100644 --- a/src/avatar/avatar.wxml +++ b/src/avatar/avatar.wxml @@ -1,6 +1,7 @@ + {{alt}} - + diff --git a/src/avatar/avatar.wxs b/src/avatar/avatar.wxs index 46067e138..2fd46cdde 100644 --- a/src/avatar/avatar.wxs +++ b/src/avatar/avatar.wxs @@ -1,5 +1,5 @@ module.exports = { - getTClass: function (size, classPrefix) { + getTClass: function (size) { var isIncludePx = size.indexOf('px') > -1; return isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1); }, @@ -22,4 +22,8 @@ module.exports = { var styles = 'z-index:' + zIndex + ';'; return styles + (isShow ? '' : 'display: none;'); }, + getIconClass: function (classPrefix, size) { + if (size.indexOf('px') > -1) return; + return classPrefix + '__icon--default-' + (size || 'medium').slice(0, 1); + }, }; diff --git a/src/avatar/props.ts b/src/avatar/props.ts index 980b57813..238aaa77d 100644 --- a/src/avatar/props.ts +++ b/src/avatar/props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2022-01-01 16:13:31 * */ import { TdAvatarProps } from './type'; diff --git a/src/avatar/type.ts b/src/avatar/type.ts index ac6fe01a4..29e276d4d 100644 --- a/src/avatar/type.ts +++ b/src/avatar/type.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-24 10:58:05 * */ import { TdBadgeProps } from '../badge/type'; @@ -65,7 +64,7 @@ export interface TdAvatarProps { */ shape?: { type: StringConstructor; - value?: ShapeEnum ; + value?: ShapeEnum; required?: boolean; }; /** @@ -77,7 +76,7 @@ export interface TdAvatarProps { value?: string; required?: boolean; }; -}; +} export interface TdAvatarGroupProps { /** @@ -102,7 +101,7 @@ export interface TdAvatarGroupProps { */ externalClasses?: { type: ArrayConstructor; - value?: ['t-class']; + value?: ['t-class', 't-class-image', 't-class-alt']; required?: boolean; }; /** @@ -122,7 +121,7 @@ export interface TdAvatarGroupProps { value?: string; required?: boolean; }; -}; +} export type ShapeEnum = 'circle' | 'round';