Merge pull request #52 from TDesignOteam/fix/avatar/css-standard

Fix/avatar/css standard

example/app.json

@@ -60,6 +60,7 @@
     "t-demo": "components/demo-block/index",
     "pull-down-list": "components/pull-down-list/index",
     "t-avatar": "tdesign-miniprogram/avatar/avatar",
+    "t-avatar-group": "tdesign-miniprogram/avatar/avatar-group",
     "t-badge": "tdesign-miniprogram/badge/badge",
     "t-button": "tdesign-miniprogram/button/button",
     "t-cell": "tdesign-miniprogram/cell/cell",
@@ -128,4 +129,4 @@
     "navigationBarTextStyle": "black"
   },
   "sitemapLocation": "sitemap.json"
-}
+}

example/pages/avatar/avatar.wxml

@@ -82,8 +82,8 @@
           wx:for-item="pic"
           wx:key="index"
           image="{{pic}}"
-          t-class-image="img-medium"
-          t-class="medium"
+          t-class-image="img-large"
+          t-class="large"
         />
       </t-avatar-group>
     </view>

src/avatar/avatar-group.less

@@ -1,15 +1,14 @@
 @import '../common/style/index.less';
 
 .@{prefix}-avatar-group {
-  // display: flex;
   display: block;
 
   &--content {
     display: flex;
   }
 
   &--large {
-    .t-avatar--large {
+    .t-size-l {
       width: 96rpx;
       height: 96rpx;
       font-weight: 600;
@@ -18,7 +17,7 @@
   }
 
   &--medium {
-    .t-avatar--large {
+    .t-size-m {
       width: 80rpx;
       height: 80rpx;
       font-weight: 600;
@@ -27,29 +26,29 @@
   }
 
   &--small {
-    .t-avatar--large {
+    .t-size-s {
       width: 64rpx;
       height: 64rpx;
       font-weight: 600;
       font-size: 24rpx;
     }
   }
 
-  .slot-collapse-avatar {
+  &__collapse--slot {
     float: left;
   }
 
-  .slot-collapse-avatar:empty + .default-collapse-avatar {
-    display: block;
+  &__collapse--slot:not(:empty) + &__collapse--default {
+    display: none;
     float: left;
   }
 
-  .slot-collapse-avatar:not(:empty) + .default-collapse-avatar {
-    display: none;
+  &__collapse--slot:empty + &__collapse--default {
+    display: block;
     float: left;
   }
 
-  .hide-collapse-avatar {
+  .t-is-hidden {
     display: none;
   }
 

src/avatar/avatar-group.ts

@@ -58,7 +58,8 @@ export default class AvatarGroup extends SuperComponent {
      */
     handleChildSlot(max, children, f) {
       const query = this.createSelectorQuery();
-      query.select('.slot-collapse-avatar').boundingClientRect();
+      const slotName = `.${this.data.classPrefix}__collapse--slot`;
+      query.select(slotName).boundingClientRect();
       query.exec((res) => {
         const isSlot = !!res[0].width;
         f(max, children, isSlot);

src/avatar/avatar-group.wxml

@@ -6,11 +6,11 @@
 >
   <slot />
   <!-- 自定义折叠元素 -->
-  <view class="slot-collapse-avatar {{collapseAvatar ? 'hide-collapse-avatar' : ''}}">
+  <view class="{{classPrefix}}__collapse--slot {{collapseAvatar ? 't-is-hidden' : ''}}">
     <slot name="collapseAvatar" />
   </view>
   <!-- 默认折叠元素 -->
-  <view class="default-collapse-avatar" wx:if="{{max && (max < length)}}">
+  <view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
     <t-avatar
       alt="{{collapseAvatar || '+N'}}"
       t-class-image="border-example-1"

src/avatar/avatar.less

@@ -1,4 +1,6 @@
-.t-avatar {
+@import '../common/style/index.less';
+
+.@{prefix}-avatar {
   font-weight: 600;
   font-size: 28rpx;
   display: flex;
@@ -9,66 +11,68 @@
   border: 0 solid;
   border-radius: 999rpx;
 
-  &--wrapper {
+  &__wrapper {
     float: left;
     position: relative;
 
-    t-badge {
+    @{prefix}-badge {
       position: absolute;
     }
 
-    .t-badge__round {
-      top: -10%;
-      right: -10%;
-    }
+    .@{prefix}-badge {
+      &__round {
+        top: -10%;
+        right: -10%;
+      }
 
-    .t-badge__circle {
-      top: -5%;
-      right: -5%;
+      &__circle {
+        top: -5%;
+        right: -5%;
+      }
     }
   }
 
-  .t-image-component {
-    width: 100%;
-    height: 100%;
-  }
-
-  .t-image {
-    width: 100%;
-    height: 100%;
-  }
-
-  &--circle {
-    border-radius: 999px;
-    overflow: hidden;
-  }
-
-  &--round {
-    border-radius: 5px;
-    overflow: hidden;
-  }
-
-  &--large {
+  &.t-size-l {
     width: 128rpx;
     height: 128rpx;
     font-weight: 600;
     font-size: 36rpx;
   }
 
-  &--medium {
+  &.t-size-m {
     width: 96rpx;
     height: 96rpx;
     font-weight: 600;
     font-size: 32rpx;
   }
 
-  &--small {
+  &.t-size-s {
     width: 64rpx;
     height: 64rpx;
     font-weight: 600;
     font-size: 24rpx;
   }
 
+  .t-image-component {
+    width: 100%;
+    height: 100%;
+  }
+
+  .t-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &--circle {
+    border-radius: 999rpx;
+    overflow: hidden;
+  }
+
+  &--round {
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+
   &__text,
   &__icon {
     width: 100%;

src/avatar/avatar.wxml

@@ -1,6 +1,6 @@
 <wxs src="./avatar.wxs" module="this" />
 <view
-  class="{{ classPrefix }}--wrapper {{this.getTClass(size,classPrefix)}} t-class"
+  class="{{ classPrefix }}__wrapper {{this.getTClass(size,classPrefix)}} t-class"
   style="{{this.getStyles(isShow, zIndex)}}"
 >
   <view

src/avatar/avatar.wxs

@@ -1,14 +1,14 @@
 module.exports = {
   getTClass: function (size, classPrefix) {
     var isIncludePx = size.indexOf('px') > -1;
-    return isIncludePx ? '' : classPrefix + '--' + (size || 'medium');
+    return isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1);
   },
   getAvatarOuterClass: function (classPrefix, size, shape) {
     var isIncludePx = size.indexOf('px') > -1;
     var classNames = [
       classPrefix,
       classPrefix + (shape === 'round' ? '--round' : '--circle'),
-      isIncludePx ? '' : classPrefix + '--' + (size || 'medium'),
+      isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1),
     ];
     return classNames.join(' ');
   },