fix: 🐛 修复textarea、input的label存在icon时高度异常的问题

Author: Moonofweisheng

src/pages/textarea/Index.vue

@@ -21,7 +21,7 @@
 
     <demo-block title="cell 类型" transparent>
       <wd-cell-group border>
-        <wd-textarea label="高度自适应" auto-height clearable v-model="value5" placeholder="请输入..." prefix-icon="dong" />
+        <wd-textarea label="高度自适应" auto-height clearable v-model="value5" placeholder="请输入..." prefix-icon="location" />
         <wd-textarea label="清空按钮" clearable v-model="value4" placeholder="请输入..." required />
         <wd-textarea label="字数限制" :maxlength="240" clearable show-word-limit v-model="value6" placeholder="请输入..." required />
         <wd-textarea label="只读" readonly clearable :maxlength="240" show-word-limit v-model="value12" placeholder="请输入..." required />

src/uni_modules/wot-design-uni/components/wd-input/index.scss

@@ -47,6 +47,7 @@
 
     @include when(cell) {
       background-color: $-dark-background2;
+      line-height: $-cell-line-height;
 
       @include when(border) {
         @include halfPixelBorder("top", $-input-cell-padding, $-dark-border-color);
@@ -96,6 +97,7 @@
 
   @include e(label) {
     position: relative;
+    display: flex;
     width: $-input-cell-label-width;
     color: $-cell-title-color;
     margin-right: $-cell-padding;
@@ -139,6 +141,7 @@
   @include e(prefix) {
     margin-right: $-input-icon-margin;
     font-size: $-input-fs;
+    line-height: initial;
 
     :deep(.wd-input__icon),
     :deep(.wd-input__clear) {
@@ -200,6 +203,8 @@
 
     :deep(.wd-input__icon),
     :deep(.wd-input__clear) {
+      display: inline-flex;
+      align-items: center;
       height: $-input-cell-height;
       line-height: $-input-cell-height;
     }

src/uni_modules/wot-design-uni/components/wd-textarea/index.scss

@@ -94,6 +94,7 @@
 
   @include e(label) {
     position: relative;
+    display: flex;
     width: $-input-cell-label-width;
     color: $-cell-title-color;
     margin-right: $-cell-padding;
@@ -125,6 +126,7 @@
   @include e(prefix) {
     margin-right: $-textarea-icon-margin;
     font-size: $-textarea-fs;
+    line-height: initial;
 
     :deep(.wd-textarea__icon) {
       margin-left: 0;
@@ -160,6 +162,7 @@
     border: none;
     box-sizing: border-box;
     word-break: break-word;
+    min-height: 24px;
 
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
@@ -182,8 +185,8 @@
     font-size: $-textarea-icon-size;
     color: $-textarea-icon-color;
     background: $-textarea-bg;
-    vertical-align: middle;
-    line-height: $-cell-line-height;
+    // vertical-align: middle;
+    // line-height: $-cell-line-height;
   }
 
   @include edeep(clear) {
@@ -217,7 +220,7 @@
 
   @include e(placeholder) {
     color: $-input-placeholder-color;
-
+    
     &.is-error {
       color: $-input-error-color;
     }
@@ -233,7 +236,7 @@
     height: 100%;
   }
 
-  @include e(error-message){
+  @include e(error-message) {
     color: $-form-item-error-message-color;
     font-size: $-form-item-error-message-font-size;
     line-height: $-form-item-error-message-line-height;
@@ -283,6 +286,7 @@
 
   @include when(cell) {
     display: flex;
+    line-height: $-cell-line-height;
 
     &.is-error::after {
       background: $-textarea-cell-border-color;
@@ -293,6 +297,8 @@
     }
 
     :deep(.wd-textarea__icon) {
+      display: inline-flex;
+      align-items: center;
       height: $-textarea-cell-height;
       line-height: $-textarea-cell-height;
     }