fix(grid): css standard

Tencent · Dec 16, 2021 · 13c77c9 · 13c77c9
1 parent 85ccd28
commit 13c77c9
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 36 deletions.
diff --git a/example/pages/grid/grid.less b/example/pages/grid/grid.less
@@ -111,13 +111,13 @@ page {
       padding-bottom: 32rpx;
     }
 
-    .t-grid-item-image-wapper {
+    .t-grid-item__image {
       width: 120rpx;
       height: 160rpx;
       flex-grow: 0;
     }
 
-    .t-grid-item-words-wapper {
+    .t-grid-item__words {
       display: block;
     }
 

diff --git a/src/grid/grid-item.less b/src/grid/grid-item.less
@@ -5,22 +5,25 @@
   height: 100%;
   float: left;
 
-  &-hover:active {
+  &--hover:active {
     background-color: #f2f3f5;
   }
 
-  &-content {
+  &--horizontal {
+    .@{prefix}-grid-item__content,
+    .@{prefix}-grid-item__words {
+      flex-direction: row;
+    }
+  }
+
+  &__content {
     display: flex;
     flex-direction: column;
     overflow: hidden;
     position: relative;
   }
 
-  .horizontal-content {
-    flex-direction: row;
-  }
-
-  &-words-wapper {
+  &__words {
     position: relative;
     flex-direction: column;
     display: flex;
@@ -29,29 +32,33 @@
     align-items: center;
   }
 
-  .horizontal-words {
-    flex-direction: row;
-  }
-
-  &-image-wapper {
+  &__image {
     display: flex;
     flex: 1;
   }
 
-  &-text {
+  &--center {
+    .@{prefix}-grid-item__image,
+    .@{prefix}-grid-item__words {
+      justify-content: center;
+    }
+  }
+
+  &--left {
+    .@{prefix}-grid-item__image,
+    .@{prefix}-grid-item__words {
+      justify-content: flex-start;
+    }
+  }
+
+  &__text {
     font-size: 28rpx;
   }
 
-  &-description {
+  &__description {
     font-size: 24rpx;
     color: rgba(0, 0, 0, .4);
   }
 
-  .align-center {
-    justify-content: center;
-  }
 
-  .align-left {
-    justify-content: flex-start;
-  }
 }
diff --git a/src/grid/grid-item.wxml b/src/grid/grid-item.wxml
@@ -1,29 +1,28 @@
 <view
-  class="{{classPrefix}} {{hover? 't-grid-item-hover':''}} t-class"
+  class="{{classPrefix}} {{hover? classPrefix + '--hover':''}} t-class"
   style="{{ gridItemStyle }}"
   bindtap="onClick"
 >
-  <view class="{{classPrefix}}-wrapper" style="{{gridItemWrapperStyle}}">
+  <view
+    class="{{classPrefix}}__wrapper {{layout==='horizontal' ? classPrefix + '--horizontal' : ''}}"
+    style="{{gridItemWrapperStyle}}"
+  >
     <view
-      class="{{classPrefix}}-content {{layout==='horizontal' ? 'horizontal-content' : ''}}"
+      class="{{classPrefix}}__content  {{align === 'center' ? classPrefix + '--center' : classPrefix + '--left'}} "
       style="{{gridItemContentStyle}}"
     >
-      <view
-        class="{{classPrefix}}-image-wapper {{align === 'center' ? 'align-center' : 'align-left'}}"
-      >
+      <view class="{{classPrefix}}__image">
         <t-image wx:if="{{image && image!== 'slot'}}" src="{{image}}" class="t-class-image" />
         <slot wx:else name="image" class="t-class-image"></slot>
       </view>
-      <view
-        class="{{classPrefix}}-words-wapper {{align === 'center' ? 'align-center' : 'align-left'}} {{layout==='horizontal' ? 'horizontal-words' : ''}}"
-      >
-        <view wx:if="{{text && text !== 'slot'}}" class="{{classPrefix}}-text t-class-text">
+      <view class="{{classPrefix}}__words">
+        <view wx:if="{{text && text !== 'slot'}}" class="{{classPrefix}}__text t-class-text">
           {{text}}
         </view>
         <slot wx:else name="text" class="t-class-text"></slot>
         <view
           wx:if="{{description && description!== 'slot'}}"
-          class="{{classPrefix}}-description t-class-description"
+          class="{{classPrefix}}__description t-class-description"
         >
           {{description}}
         </view>

diff --git a/src/grid/grid.less b/src/grid/grid.less
@@ -5,7 +5,7 @@
   overflow: hidden;
   background: rgba(255, 255, 255, 1);
 
-  &-content {
+  &__content {
     width: auto;
   }
 }
diff --git a/src/grid/grid.wxml b/src/grid/grid.wxml
@@ -1,5 +1,5 @@
-<view class="{{classPrefix}} t-class" style="{{ gridStyle}}">
-  <view class="{{classPrefix}}-content" style="{{ contentStyle }}">
+<view class="{{classPrefix}} t-class">
+  <view class="{{classPrefix}}__content">
     <slot />
   </view>
 </view>