fix(avatar): css standard

Tencent · Dec 15, 2021 · b7ef036 · b7ef036
1 parent 35d473a
commit b7ef036
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 33 deletions.
diff --git a/example/pages/avatar/avatar.wxml b/example/pages/avatar/avatar.wxml
@@ -74,16 +74,16 @@
         max="5"
         cascading="left-up"
         collapseAvatar="+5"
-        size="medium"
+        size="large"
         class="border-example-show"
       >
         <t-avatar
           wx:for="{{pics6}}"
           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>

diff --git a/src/avatar/avatar-group.less b/src/avatar/avatar-group.less
@@ -9,7 +9,7 @@
   }
 
   &--large {
-    .t-avatar--large {
+    .t-size-l {
       width: 96rpx;
       height: 96rpx;
       font-weight: 600;
@@ -18,7 +18,7 @@
   }
 
   &--medium {
-    .t-avatar--large {
+    .t-size-m {
       width: 80rpx;
       height: 80rpx;
       font-weight: 600;
@@ -27,7 +27,7 @@
   }
 
   &--small {
-    .t-avatar--large {
+    .t-size-s {
       width: 64rpx;
       height: 64rpx;
       font-weight: 600;
@@ -49,7 +49,7 @@
     float: left;
   }
 
-  .hide-collapse-avatar {
+  .t-is-hidden {
     display: none;
   }
 

diff --git a/src/avatar/avatar-group.wxml b/src/avatar/avatar-group.wxml
@@ -6,7 +6,7 @@
 >
   <slot />
   <!-- 自定义折叠元素 -->
-  <view class="slot-collapse-avatar {{collapseAvatar ? 'hide-collapse-avatar' : ''}}">
+  <view class="slot-collapse-avatar {{collapseAvatar ? 't-is-hidden' : ''}}">
     <slot name="collapseAvatar" />
   </view>
   <!-- 默认折叠元素 -->

diff --git a/src/avatar/avatar.less b/src/avatar/avatar.less
@@ -9,7 +9,7 @@
   border: 0 solid;
   border-radius: 999rpx;
 
-  &--wrapper {
+  &__wrapper {
     float: left;
     position: relative;
 
@@ -28,6 +28,27 @@
     }
   }
 
+  &.t-size-l {
+    width: 128rpx;
+    height: 128rpx;
+    font-weight: 600;
+    font-size: 36rpx;
+  }
+
+  &.t-size-m {
+    width: 96rpx;
+    height: 96rpx;
+    font-weight: 600;
+    font-size: 32rpx;
+  }
+
+  &.t-size-s {
+    width: 64rpx;
+    height: 64rpx;
+    font-weight: 600;
+    font-size: 24rpx;
+  }
+
   .t-image-component {
     width: 100%;
     height: 100%;
@@ -48,27 +69,6 @@
     overflow: hidden;
   }
 
-  &--large {
-    width: 128rpx;
-    height: 128rpx;
-    font-weight: 600;
-    font-size: 36rpx;
-  }
-
-  &--medium {
-    width: 96rpx;
-    height: 96rpx;
-    font-weight: 600;
-    font-size: 32rpx;
-  }
-
-  &--small {
-    width: 64rpx;
-    height: 64rpx;
-    font-weight: 600;
-    font-size: 24rpx;
-  }
-
   &__text,
   &__icon {
     width: 100%;

diff --git a/src/avatar/avatar.wxml b/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

diff --git a/src/avatar/avatar.wxs b/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(' ');
   },