Merge pull request #46 from TDesignOteam/fix/input/css-standard

fix(input):css standard
Tencent · Dec 16, 2021 · a2bb06d · a2bb06d
2 parents aaa7675 + 6201113
commit a2bb06d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 26 deletions.
diff --git a/src/input/input.less b/src/input/input.less
@@ -35,18 +35,14 @@
     flex: none;
   }
 
-  &__required {
-    color: @input-error-text-color;
-  }
-
   &__content {
     display: flex;
     align-items: center;
     width: 100%;
     font-size: @input-font-size;
   }
 
-  &-wrap {
+  &__wrap {
     display: flex;
     flex-wrap: wrap;
     flex: auto;
@@ -84,7 +80,7 @@
     }
   }
 
-  &--control {
+  &__control {
     display: block;
     box-sizing: border-box;
     width: 100%;
@@ -115,30 +111,25 @@
       cursor: default;
     }
 
-    &__right {
+    &--right {
       text-align: right;
     }
 
-    &__center {
+    &--center {
       text-align: center;
     }
   }
 
   &__placeholder {
     color: @input-placeholder-text-color;
   }
-
-  &--count {
-    text-align: right;
-    color: @input-placeholder-text-color;
-  }
 }
 
-.@{prefix}-input__error {
+.@{prefix}-input.@{prefix}-is-error {
   align-items: flex-start;
 
   .@{prefix}-input {
-    &--control {
+    &__control {
       color: @input-error-text-color;
 
       &::placeholder {
@@ -161,10 +152,6 @@
   }
 }
 
-.@{prefix}-input__disabled {
-  color: @input-disabled-text-color;
-}
-
 .@{prefix}-input--size-medium {
   padding-top: 32rpx;
   padding-bottom: 33rpx;

diff --git a/src/input/input.ts b/src/input/input.ts
@@ -27,6 +27,7 @@ export default class Input extends SuperComponent {
   data = {
     inputValue: '',
     classPrefix: name,
+    classBasePrefix: prefix,
     characterLength: 0,
   };
 

diff --git a/src/input/input.wxml b/src/input/input.wxml
@@ -1,11 +1,11 @@
 <view
-  class="{{classPrefix}} {{!!errorMessage ? classPrefix + '__error' : ''}}  t-input--size-{{size}} {{classPrefix + '--bordered'}} t-class"
+  class="{{classPrefix}} {{!!errorMessage ? classBasePrefix + '-is-error' : ''}}  {{classPrefix}}--size-{{size}} {{classPrefix + '--bordered'}} t-class"
 >
   <view wx:if="{{name}}" class="{{classPrefix + '__name'}}">
     <slot name="name" wx:if="{{name === 'slot'}}" />
     <text wx:else>{{name}}</text>
   </view>
-  <view class="{{classPrefix}}-wrap">
+  <view class="{{classPrefix}}__wrap">
     <view class="{{classPrefix}}__content">
       <input
         maxlength="{{maxlength || -1}}"
@@ -24,22 +24,22 @@
         confirm-type="{{confirmType}}"
         confirm-hold="{{confirmHold}}"
         adjust-position="{{adjustPosition}}"
-        class="{{classPrefix}}--control {{suffix || align ==='right' ? classPrefix + '--control__right':''}} {{align === 'center' ? classPrefix + '--control__center':''}}  t-class-input"
+        class="{{classPrefix}}__control {{suffix || align ==='right' ? classPrefix + '__control--right':''}} {{align === 'center' ? classPrefix + '__control--center':''}}  t-class-input"
       />
       <view
         wx:if="{{ clearable && (inputValue.length > 0 || characterLength > 0)}}"
-        class="{{classPrefix}}-wrap--icon"
+        class="{{classPrefix}}__wrap--icon"
         bind:tap="clearInput"
       >
         <t-icon name="close-circle-filled" customStyle="font-size: 39rpx" />
       </view>
-      <view class="{{classPrefix}}-wrap--suffix">
+      <view class="{{classPrefix}}__wrap--suffix">
         <slot name="suffix" />
       </view>
-      <view wx:if="{{suffix}}" class="{{classPrefix}}-wrap--suffix-text">
+      <view wx:if="{{suffix}}" class="{{classPrefix}}__wrap--suffix-text">
         <text>{{suffix}}</text>
       </view>
-      <view wx:if="{{suffixIcon}}" class="{{classPrefix}}-wrap--icon">
+      <view wx:if="{{suffixIcon}}" class="{{classPrefix}}__wrap--icon">
         <t-icon name="{{suffixIcon}}" customStyle="font-size: 39rpx" />
       </view>
     </view>