fix(textarea): 公共组件当初始处于隐藏状态再次可视后未做高度再计算的问题 (#3003)

* fix(textarea.tsx): 修复textarea在折叠面板内时，高度计算不正确，会出现滚动条的问题修复用户反馈issue"[Textarea] textarea在折叠面板内时，高度计算不正确，会出现滚动条",issue详情见:#2809 * fix(textarea.tsx): 修复t-textarea公共组件在初始被隐藏时没有做高度计算的问题 t-textarea在部分场景比如t-collapse-panel中使用时,初始化加载时该组件没有高度,但是当再次可视时因为没有再次做高度的计算导致没有获得响应式高度因此出现这个问题.
Tencent · Dec 27, 2023 · 2c56cd5 · 2c56cd5
1 parent dde5868
commit 2c56cd5
Showing 1 changed file with 27 additions and 13 deletions.
diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx
@@ -86,7 +86,19 @@ export default mixins(Vue as VueConstructor<Textarea>, classPrefixMixins).extend
     },
   },
   mounted() {
-    this.adjustTextareaHeight();
+    const textareaElem = this.$refs.refTextareaElem as HTMLInputElement;
+    if (textareaElem) {
+      textareaElem.addEventListener('transitionend', this.adjustTextareaHeight);
+    } else {
+      this.adjustTextareaHeight();
+    }
+  },
+
+  beforeDestroy() {
+    const textareaElem = this.$refs.refTextareaElem as HTMLInputElement;
+    if (textareaElem) {
+      textareaElem.removeEventListener('transitionend', this.adjustTextareaHeight);
+    }
   },
 
   watch: {
@@ -111,18 +123,20 @@ export default mixins(Vue as VueConstructor<Textarea>, classPrefixMixins).extend
 
   methods: {
     adjustTextareaHeight() {
-      if (!this.$refs.refTextareaElem) return;
-      if (this.autosize === true) {
-        this.textareaStyle = calcTextareaHeight(this.$refs.refTextareaElem as HTMLTextAreaElement);
-      } else if (this.autosize && typeof this.autosize === 'object') {
-        this.textareaStyle = calcTextareaHeight(
-          this.$refs.refTextareaElem as HTMLTextAreaElement,
-          this.autosize?.minRows,
-          this.autosize?.maxRows,
-        );
-      } else if (this.$attrs.rows) {
-        this.textareaStyle = { height: 'auto', minHeight: 'auto' };
-      }
+      this.$nextTick(() => {
+        if (!this.$refs.refTextareaElem) return;
+        if (this.autosize === true) {
+          this.textareaStyle = calcTextareaHeight(this.$refs.refTextareaElem as HTMLTextAreaElement);
+        } else if (this.autosize && typeof this.autosize === 'object') {
+          this.textareaStyle = calcTextareaHeight(
+            this.$refs.refTextareaElem as HTMLTextAreaElement,
+            this.autosize?.minRows,
+            this.autosize?.maxRows,
+          );
+        } else if (this.$attrs.rows) {
+          this.textareaStyle = { height: 'auto', minHeight: 'auto' };
+        }
+      });
     },
     emitEvent(name: string, value: string | number, context: object) {
       this.$emit(name, value, context);