From 682c7bef939eddead47ea973675c719b533290a5 Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Wed, 19 Jun 2024 18:57:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=20`f-textarea`=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=95=B4=E4=BD=93=E6=B5=81=E7=A8=8B=E5=BA=A6?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A3=E7=A0=81=E8=BF=91=E4=B8=80=E6=AD=A5=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  3 +
 .../fighting-design/textarea/src/textarea.vue | 82 +++----------------
 packages/fighting-theme/src/textarea.scss     |  7 +-
 start/src/App.vue                             | 17 +++-
 4 files changed, 35 insertions(+), 74 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76ffb02848..7b9f3779f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@
 - 修复 `f-checkbox-group` 组件 `row-gap` 配置项失效问题
 - 禁止了 `f-form` 组件的原生表单校验
 - 修复 `f-textarea` 的 outline 样式不一致性
+- 修复 `f-textarea` 组件在 `resize` 不同配置项的情况下输入框错位的问题
+- 优化 `f-textarea` 组件整体流程度，代码近一步优化
+- `f-textarea` 组件 Enter 事件默认改为换行，ctrl + Enter 为提交事件，会执行 `on-enter` 事件
 
 ## 1.0.0-alpha.8 (2024-06-12)
 
diff --git a/packages/fighting-design/textarea/src/textarea.vue b/packages/fighting-design/textarea/src/textarea.vue
index 7aec0f404b..f1367cd122 100644
--- a/packages/fighting-design/textarea/src/textarea.vue
+++ b/packages/fighting-design/textarea/src/textarea.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
   import { Props } from './props'
-  import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+  import { ref, nextTick, onMounted } from 'vue'
   import { useInput, useList, useRun } from '../../_hooks'
   import { FIconCross } from '../../_svg'
   import { FSvgIcon } from '../../svg-icon'
-  import { debounce } from '../../_utils'
-  import type { WatchStopHandle } from 'vue'
 
   defineOptions({ name: 'FTextarea' })
 
@@ -30,11 +28,13 @@
 
   /** 改变高度 */
   const changeHeight = async (): Promise<void> => {
-    await nextTick()
-    if (textareaRef.value) {
-      textareaRef.value.style.height = 'auto'
-      textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
+    if (!textareaRef.value || !prop.autoHeight) {
+      return
     }
+
+    await nextTick()
+
+    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
   }
 
   /**
@@ -42,58 +42,12 @@
    *
    * @param { Object } evt 事件对象
    */
-  const _handleInput = (evt: Event): void => {
+  const listerInput = (evt: Event): void => {
     handleInput(evt)
 
-    // 如果需要自适应高度，则每次输入的时候重新设置高度
-    if (prop.autoHeight) {
-      changeHeight()
-    }
+    changeHeight() // 如果需要自适应高度，则每次输入的时候重新设置高度
   }
 
-  /** 是否为自动高度 */
-  const isAutoHeight = (): void => {
-    /**
-     * 监视器实例
-     *
-     * 监视绑定值 行数 是否自动高度的数据变化，来设置文本框的高度
-     */
-    const unwatch: WatchStopHandle = watch(
-      (): (string | number | boolean)[] => [prop.modelValue, prop.rows, prop.autoHeight],
-      (): void => {
-        changeHeight()
-
-        // 如果中途自动高度为假了，则取消监视器
-        if (!prop.autoHeight) {
-          unwatch()
-          // 并且设置自动高度
-          if (textareaRef.value) {
-            textareaRef.value.style.height = 'auto'
-          }
-        }
-      },
-      {
-        immediate: true
-      }
-    )
-  }
-
-  /** 设置宽度方法 */
-  const _changeHeight = debounce(changeHeight, 500)
-
-  // 初始化调用
-  onMounted(() => {
-    if (prop.autoHeight) {
-      isAutoHeight()
-      window.addEventListener('resize', _changeHeight)
-    }
-  })
-
-  // 销毁前移除事件
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', _changeHeight)
-  })
-
   /**
    * 监听回车事件
    *
@@ -106,19 +60,6 @@
   const handleEnterKey = (evt: KeyboardEvent): void => {
     // 如果按下 Enter 和 Ctrl 触发换行
     if (evt.key === 'Enter' && evt.ctrlKey) {
-      modelValue.value += '\n'
-
-      // 如果是自适应高度，则重新设置高度
-      if (prop.autoHeight) {
-        changeHeight()
-      }
-
-      // 返回阻止继续执行
-      return
-    }
-
-    // 只有在按下 Enter 才触发回调方法
-    if (evt.key === 'Enter') {
       /**
        * 阻止默认换行的事件
        *
@@ -129,6 +70,9 @@
       run(prop.onEnter, modelValue.value, evt)
     }
   }
+
+  // 初始化调用
+  onMounted(changeHeight)
 </script>
 
 <template>
@@ -143,7 +87,7 @@
       :autofocus
       :placeholder
       :name
-      @input="_handleInput"
+      @input="listerInput"
       @change="handleChange"
       @blur="onBlur"
       @focus="onFocus"
diff --git a/packages/fighting-theme/src/textarea.scss b/packages/fighting-theme/src/textarea.scss
index d3d9c570be..5fa45ac360 100644
--- a/packages/fighting-theme/src/textarea.scss
+++ b/packages/fighting-theme/src/textarea.scss
@@ -7,16 +7,17 @@
   overflow: hidden;
   position: relative;
   display: inline-flex;
-  resize: var(--textarea-resize);
-  align-items: flex-end;
-  transition: 0.3s;
+  transition: outline 0.3s;
   border: 1px solid #ddd;
   background: #fff;
   outline: 2px solid transparent;
   border-radius: 5px;
+  min-height: 80px;
+  resize: var(--textarea-resize);
 
   &__textarea {
     width: 100%;
+    height: inherit;
     border: none;
     resize: none;
     outline: none;
diff --git a/start/src/App.vue b/start/src/App.vue
index 9fa3844ce1..325cdc5e42 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -1,3 +1,16 @@
-<template></template>
+<template>
+  <!-- <f-textarea v-model="value5" placeholder="禁止拉伸" resize="none" auto-height /> -->
+  <!-- <f-textarea v-model="value5" placeholder="禁止拉伸" resize="none" /> -->
+  <f-textarea clear v-model="value6" placeholder="随意拉伸" resize="both" />
+  <f-textarea v-model="value7" placeholder="水平拉伸" resize="horizontal" />
+  <f-textarea v-model="value8" placeholder="垂直拉伸" resize="vertical" />
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const value5 = ref('none 禁止拉伸')
+  const value6 = ref('both 随意拉伸')
+  const value7 = ref('horizontal 水平拉伸')
+  const value8 = ref('vertical 垂直拉伸')
+</script>