fix: textarea 修复

src/packages/__VUE/textarea/doc.en-US.md

@@ -50,7 +50,7 @@ export default {
 
 ```html
 <template>
-  <nut-textarea v-model="value" rows="10" autosize />
+  <nut-textarea v-model="value" rows="1" autosize />
 </template>
 ```
 :::
@@ -61,7 +61,7 @@ export default {
 ```html
 <template>
   <nut-textarea readonly model-value="Textarea read only status" />
-  <nut-textarea disabled model-value="Textarea disabled" limit-show max-length="20" />
+  <nut-textarea disabled model-value="Textarea disabled" />
 </template>
 ```
 :::

src/packages/__VUE/textarea/doc.md

@@ -50,7 +50,7 @@ export default {
 
 ```html
 <template>
-  <nut-textarea v-model="value" rows="10" autosize />
+  <nut-textarea v-model="value" :rows="1" autosize />
 </template>
 ```
 :::
@@ -60,8 +60,8 @@ export default {
 
 ```html
 <template>
-  <nut-textarea readonly model-value="textarea只读状态" />
-  <nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
+  <nut-textarea readonly model-value="textarea 只读状态" />
+  <nut-textarea disabled model-value="textarea 禁用状态" />
 </template>
 ```
 :::
@@ -71,16 +71,16 @@ export default {
 
 | 参数        | 说明                                             | 类型           | 默认值         |
 |-------------|--------------------------------------------------|----------------|----------------|
-| v-model | input value, supports two-way binding | string | -|
-| placeholder | Set placeholder prompt text | string | `Please enter content` |
-| max-length | limit the longest input characters | string \| number | - |
-| rows | height of textarea, priority is higher than autosize attribute `only supports H5` | string \| number | `2` |
-| limit-show | Whether textarea displays input characters. Must be used with `max-length` | boolean | `false` |
-| autosize | whether to adapt to the height of the content, or to pass in an object, such as `{ maxHeight: 200, minHeight: 100 }`, the unit is `px` | boolean \| {maxHeight?: number; minHeight?: number} | `false` |
-| text-align | text position, optional values `left`, `center`, `right` | string | - |
-| readonly | read-only property | boolean | `false` |
-| disabled | disabled attribute | boolean | `false` |
-| autofocus | get focus automatically | boolean | `false` |
+| v-model     | 输入值，支持双向绑定                             | string         | `-`              |
+| placeholder | 设置占位提示文字                                 | string         | `'请输入内容'` |
+| max-length  | 限制最长输入字符                                 | string \| number | -              |
+| rows | textarea的高度，优先级高于autosize属性  `仅支持 H5`       | string \| number | `2`            |
+| limit-show  | textarea是否展示输入字符。须配合`max-length`使用 | boolean        | `false`        |
+| autosize | 是否自适应内容高度，也可传入对象, 如 { maxHeight: 200, minHeight: 100 }，单位为px | boolean \| {maxHeight?: number; minHeight?: number}       | `false`        |
+| text-align  | 文本位置,可选值`left`,`center`,`right`           | string         | `left`         |
+| readonly    | 只读属性                                         | boolean        | `false`        |
+| disabled    | 禁用属性                                         | boolean        | `false`        |
+| autofocus   | 自动获取焦点                                     | boolean        | `false`        |
 
 
 ### Events

src/packages/__VUE/textarea/doc.taro.md

@@ -50,7 +50,7 @@ export default {
 
 ```html
 <template>
-  <nut-textarea v-model="value" rows="10" autosize />
+  <nut-textarea v-model="value" autosize />
 </template>
 ```
 :::
@@ -60,8 +60,8 @@ export default {
 
 ```html
 <template>
-  <nut-textarea readonly model-value="textarea只读状态" />
-  <nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
+  <nut-textarea readonly model-value="textarea 只读状态" />
+  <nut-textarea disabled model-value="textarea 禁用状态" />
 </template>
 ```
 :::

src/packages/__VUE/textarea/index.scss

@@ -14,7 +14,6 @@
   background: $white;
   font-size: $textarea-font;
   padding: 10px 25px;
-
   &--disabled {
     .nut-textarea__textarea,
     .nut-textarea____limit {
@@ -45,6 +44,12 @@
     border: none;
     resize: none;
     line-height: 20px;
+    .taro-textarea {
+      font-size: 14px;
+    }
+  }
+  &__textarea__readonly {
+    padding: 5px 10px;
   }
   &__ali {
     line-height: 17px;
@@ -53,5 +58,6 @@
     position: absolute;
     top: -999999px;
     left: -999999px;
+    font-size: 14px;
   }
 }

src/packages/__VUE/textarea/index.taro.vue

@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <view v-if="readonly" class="nut-textarea__textarea">
+    <view v-if="readonly" class="nut-textarea__textarea nut-textarea__textarea__readonly">
       {{ modelValue }}
     </view>
     <textarea
@@ -86,10 +86,17 @@ export default create({
     });
 
     const styles: any = computed(() => {
-      return {
-        textAlign: props.textAlign,
-        height: props.autosize ? heightSet.value : 'null'
+      const styleObj: { textAlign: string; height?: string } = {
+        textAlign: props.textAlign
       };
+      if (props.autosize) {
+        styleObj['height'] = heightSet.value;
+      }
+      return styleObj;
+      // return {
+      //   textAlign: props.textAlign,
+      //   height: props.autosize ? heightSet.value : 'null'
+      // };
     });
 
     const copyTxtStyle: any = ref({
@@ -152,14 +159,21 @@ export default create({
       () => props.modelValue,
       () => {
         if (props.autosize) {
-          copyHeight();
+          setTimeout(() => {
+            copyHeight();
+          }, 100);
         }
       }
     );
+    // const listenInput = () => {
+    // window.addEventListener('compositionend', function () {
+    //   copyHeight();
+    // });
+    // };
 
     const copyHeight = () => {
       const query = Taro.createSelectorQuery();
-      query.select('.cpoyText').boundingClientRect();
+      query.select('.nut-textarea__cpoyText').boundingClientRect();
       query.exec((res) => {
         if (res[0]) {
           if (props.modelValue == '') {
@@ -167,9 +181,7 @@ export default create({
           } else {
             textareaHeight.value = res[0]['height'] || 20;
           }
-          setTimeout(() => {
-            getContentHeight();
-          }, 400);
+          nextTick(getContentHeight);
         }
       });
     };
@@ -202,9 +214,10 @@ export default create({
     const env = Taro.getEnv();
     onMounted(() => {
       if (props.autosize) {
+        // listenInput();
         Taro.nextTick(() => {
           setTimeout(() => {
-            if (Taro.getEnv() === 'ALIPAY') {
+            if (Taro.getEnv() === 'ALIPAY' || Taro.getEnv() === 'WEB') {
               getRefWidth();
               copyHeight();
             } else {

src/sites/mobile-taro/vue/src/dentry/pages/textarea/index.vue

@@ -8,8 +8,8 @@
     <h2>高度自定义，拉伸</h2>
     <nut-textarea v-model="value3" autosize />
     <h2>只读、禁用</h2>
-    <nut-textarea readonly model-value="textarea只读状态" />
-    <nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
+    <nut-textarea readonly model-value="textarea 只读状态" />
+    <nut-textarea disabled model-value="textarea 禁用状态" />
   </div>
 </template>
 
@@ -41,4 +41,15 @@ export default {
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.nut-textarea__textarea__readonly {
+  background-color: #f9f9f9;
+}
+.nut-textarea--disabled {
+  textarea {
+    padding: 5px 10px;
+    height: 30px;
+    background-color: #f9f9f9;
+  }
+}
+</style>