From 8f56ff06d40db26b3e4daebb18f302f6782642e9 Mon Sep 17 00:00:00 2001
From: mrayi <1078464063@qq.com>
Date: Mon, 1 Apr 2024 11:08:20 +0800
Subject: [PATCH] refactor(textarea): move to script setup (#2997)

* refactor(textarea): move to script setup

* fix: type

* chore: update

---------

Co-authored-by: Eiinu <eiinu@qq.com>
---
 src/config.json                               |   1 +
 .../__VUE/textarea/__tests__/textarea.spec.ts |  14 +
 src/packages/__VUE/textarea/doc.en-US.md      |   8 +
 src/packages/__VUE/textarea/doc.md            |   8 +
 src/packages/__VUE/textarea/doc.taro.md       |   8 +
 src/packages/__VUE/textarea/index.taro.ts     |  11 +
 src/packages/__VUE/textarea/index.taro.vue    | 273 ------------------
 src/packages/__VUE/textarea/index.ts          |  11 +
 src/packages/__VUE/textarea/index.vue         | 202 -------------
 src/packages/__VUE/textarea/textarea.taro.vue | 244 ++++++++++++++++
 src/packages/__VUE/textarea/textarea.vue      | 174 +++++++++++
 11 files changed, 479 insertions(+), 475 deletions(-)
 create mode 100644 src/packages/__VUE/textarea/index.taro.ts
 delete mode 100644 src/packages/__VUE/textarea/index.taro.vue
 create mode 100644 src/packages/__VUE/textarea/index.ts
 delete mode 100644 src/packages/__VUE/textarea/index.vue
 create mode 100644 src/packages/__VUE/textarea/textarea.taro.vue
 create mode 100644 src/packages/__VUE/textarea/textarea.vue

diff --git a/src/config.json b/src/config.json
index b30b2f58ca..75ac0f7b93 100644
--- a/src/config.json
+++ b/src/config.json
@@ -431,6 +431,7 @@
           "version": "3.0.0",
           "name": "Textarea",
           "cName": "文本域",
+          "setup": true,
           "desc": "文本输入",
           "author": "gx"
         },
diff --git a/src/packages/__VUE/textarea/__tests__/textarea.spec.ts b/src/packages/__VUE/textarea/__tests__/textarea.spec.ts
index 1e0979f9cb..80a625d7ed 100644
--- a/src/packages/__VUE/textarea/__tests__/textarea.spec.ts
+++ b/src/packages/__VUE/textarea/__tests__/textarea.spec.ts
@@ -117,3 +117,17 @@ test('should emit blur event when textarea is blur', () => {
   wrapper.find('textarea').trigger('blur')
   expect(wrapper.emitted('blur')).toBeTruthy()
 })
+
+test('should set height when autosize is object', async () => {
+  const wrapper = mount(Textarea, {
+    props: {
+      autosize: {
+        minHeight: 200,
+        maxHeight: 300
+      }
+    }
+  })
+  await nextTick()
+  const txtWrapper = wrapper.find('.nut-textarea__textarea').element as HTMLTextAreaElement
+  expect(txtWrapper.style.height).toBe('200px')
+})
diff --git a/src/packages/__VUE/textarea/doc.en-US.md b/src/packages/__VUE/textarea/doc.en-US.md
index 7dce8f0829..4dcc8bbc8f 100644
--- a/src/packages/__VUE/textarea/doc.en-US.md
+++ b/src/packages/__VUE/textarea/doc.en-US.md
@@ -59,6 +59,14 @@ app.use(Textarea)
 | focus | Triggered when focusing | `event` |
 | blur | Triggered when out of focus | `value,event` |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type { TextareaProps, TextareaInstance } from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/textarea/doc.md b/src/packages/__VUE/textarea/doc.md
index 24f04191fa..561c9cd88e 100644
--- a/src/packages/__VUE/textarea/doc.md
+++ b/src/packages/__VUE/textarea/doc.md
@@ -59,6 +59,14 @@ app.use(Textarea)
 | focus | 聚焦时触发 | `event` |
 | blur | 失焦时触发 | `value,event` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type { TextareaProps, TextareaInstance } from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/textarea/doc.taro.md b/src/packages/__VUE/textarea/doc.taro.md
index 74404ab8e1..2fedb67eb0 100644
--- a/src/packages/__VUE/textarea/doc.taro.md
+++ b/src/packages/__VUE/textarea/doc.taro.md
@@ -61,6 +61,14 @@ app.use(Textarea)
 | focus | 聚焦时触发 | `event` |
 | blur | 失焦时触发 | `value,event` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type { TextareaProps, TextareaInstance } from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/textarea/index.taro.ts b/src/packages/__VUE/textarea/index.taro.ts
new file mode 100644
index 0000000000..2205de8f9c
--- /dev/null
+++ b/src/packages/__VUE/textarea/index.taro.ts
@@ -0,0 +1,11 @@
+import Textarea from './textarea.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Textarea)
+
+export type { TextareaProps } from './textarea.taro.vue'
+
+export type TextareaInstance = ComponentPublicInstance & InstanceType<typeof Textarea>
+
+export { Textarea, Textarea as default }
diff --git a/src/packages/__VUE/textarea/index.taro.vue b/src/packages/__VUE/textarea/index.taro.vue
deleted file mode 100644
index 811e458456..0000000000
--- a/src/packages/__VUE/textarea/index.taro.vue
+++ /dev/null
@@ -1,273 +0,0 @@
-<template>
-  <view :class="classes">
-    <textarea
-      ref="textareaRef"
-      v-bind="$attrs"
-      :class="['nut-textarea__textarea', env == 'ALIPAY' && 'nut-textarea__ali']"
-      :style="styles"
-      :rows="rows"
-      :disabled="disabled || readonly"
-      :value="modelValue"
-      :show-count="false"
-      :maxlength="maxLength ? maxLength : -1"
-      :placeholder="placeholder || translate('placeholder')"
-      :auto-focus="autofocus"
-      @input="change"
-      @blur="blur"
-      @focus="focus"
-      @change="endComposing"
-      @compositionend="endComposing"
-      @compositionstart="startComposing"
-    />
-    <view v-if="limitShow" class="nut-textarea__limit"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
-    <view v-if="autosize" class="nut-textarea__cpoyText" :style="copyTxtStyle">{{ modelValue }}</view>
-  </view>
-</template>
-<script lang="ts">
-import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import Taro from '@tarojs/taro'
-import { useLocale } from '@/packages/utils/useLocale'
-import { useFormDisabled } from '../form/common'
-
-export interface InputTarget extends HTMLInputElement {
-  composing?: boolean
-}
-
-const { create } = createComponent('textarea')
-const cN = 'NutTextarea'
-
-export default create({
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    textAlign: {
-      type: String,
-      default: ''
-    },
-    limitShow: {
-      type: Boolean,
-      default: false
-    },
-    maxLength: {
-      type: [String, Number],
-      default: ''
-    },
-    rows: {
-      type: [String, Number],
-      default: ''
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    autosize: {
-      type: [Boolean, Object],
-      default: false
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['update:modelValue', 'change', 'blur', 'focus'],
-
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'))
-    const translate = useLocale(cN)
-    const classes = computed(() => {
-      const prefixCls = 'nut-textarea'
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--disabled`]: disabled.value
-      }
-    })
-
-    const styles = computed(() => {
-      const styleObj: any = {
-        textAlign: props.textAlign
-      }
-      if (props.autosize) {
-        styleObj['height'] = heightSet.value
-      }
-      return styleObj
-    })
-
-    const copyTxtStyle: any = ref({
-      'word-break': 'break-all',
-      width: '0'
-    })
-
-    const emitChange = (value: string, event: Event) => {
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.substring(0, Number(props.maxLength))
-      }
-      emit('update:modelValue', value, event)
-      emit('change', value, event)
-    }
-
-    const change = (event: Event) => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        if (!composing.value) {
-          _onInput(event)
-        }
-      } else {
-        _onInput(event)
-      }
-    }
-    const _onInput = (event: Event) => {
-      const input = event.target as HTMLInputElement
-      let value = input.value
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.slice(0, Number(props.maxLength))
-      }
-      emitChange(value, event)
-    }
-
-    const focus = (event: Event) => {
-      if (disabled.value) return
-      if (props.readonly) return
-      emit('focus', event)
-    }
-
-    const blur = (event: Event) => {
-      if (disabled.value) return
-      if (props.readonly) return
-      const input = event.target as HTMLInputElement
-      let value = input.value
-      emitChange(value, event)
-      emit('blur', event)
-    }
-
-    const textareaRef = ref<any>(null)
-    const textareaHeight = ref(20)
-    const heightSet = ref('auto')
-    const getContentHeight = () => {
-      heightSet.value = 'auto'
-      let height = textareaHeight.value
-      if (typeof props.autosize === 'object') {
-        const { maxHeight, minHeight } = props.autosize
-        if (maxHeight !== undefined) {
-          height = Math.min(height, maxHeight)
-        }
-        if (minHeight !== undefined) {
-          height = Math.max(height, minHeight)
-        }
-      }
-      if (height) {
-        heightSet.value = height + 'px'
-      }
-    }
-    watch(
-      () => props.modelValue,
-      () => {
-        if (props.autosize) {
-          setTimeout(() => {
-            copyHeight()
-          }, 100)
-        }
-      }
-    )
-
-    const copyHeight = () => {
-      const query = Taro.createSelectorQuery()
-      query.select('.nut-textarea__cpoyText').boundingClientRect()
-      query.exec((res) => {
-        if (res[0]) {
-          if (props.modelValue == '') {
-            textareaHeight.value = 20
-          } else {
-            textareaHeight.value = res[0]['height'] || 20
-          }
-          nextTick(getContentHeight)
-        }
-      })
-    }
-
-    const getRefHeight = () => {
-      const query = Taro.createSelectorQuery()
-      query.selectAll('.nut-textarea__textarea').boundingClientRect()
-      let uid = textareaRef.value ? textareaRef.value.uid : '0'
-      query.exec((res: any) => {
-        if (res[0] && textareaRef.value) {
-          let _item: any = Array.from(res[0]).filter((item: any) => item.id == uid)
-          if (_item[0]) {
-            if (Taro.getEnv() !== Taro.ENV_TYPE.WEAPP) {
-              textareaHeight.value = _item[0]['height'] || 20
-            }
-            copyTxtStyle.value.width = _item[0]['width'] + 'px'
-          }
-          nextTick(getContentHeight)
-        }
-      })
-    }
-
-    const getRefWidth = () => {
-      const query = Taro.createSelectorQuery()
-      query.select('.nut-textarea__textarea').boundingClientRect()
-      query.exec((res: any) => {
-        if (res[0] && textareaRef.value) {
-          copyTxtStyle.value.width = res[0]['width'] + 'px'
-        }
-      })
-    }
-    const env = Taro.getEnv()
-    onMounted(() => {
-      if (props.autosize) {
-        Taro.nextTick(() => {
-          setTimeout(() => {
-            if (Taro.getEnv() === 'ALIPAY' || Taro.getEnv() === 'WEB') {
-              getRefWidth()
-              copyHeight()
-            } else {
-              getRefHeight()
-            }
-          }, 300)
-        })
-      }
-    })
-    const composing = ref(false)
-    const startComposing = () => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        composing.value = true
-      }
-    }
-
-    const endComposing = ({ target }: Event) => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        if (composing.value) {
-          composing.value = false
-          ;(target as InputTarget).dispatchEvent(new Event('input'))
-        }
-      }
-    }
-
-    return {
-      env,
-      textareaRef,
-      classes,
-      styles,
-      disabled,
-      change,
-      focus,
-      blur,
-      translate,
-      copyTxtStyle,
-      startComposing,
-      endComposing
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/textarea/index.ts b/src/packages/__VUE/textarea/index.ts
new file mode 100644
index 0000000000..ffff221ab5
--- /dev/null
+++ b/src/packages/__VUE/textarea/index.ts
@@ -0,0 +1,11 @@
+import Textarea from './textarea.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Textarea)
+
+export type { TextareaProps } from './textarea.vue'
+
+export type TextareaInstance = ComponentPublicInstance & InstanceType<typeof Textarea>
+
+export { Textarea, Textarea as default }
diff --git a/src/packages/__VUE/textarea/index.vue b/src/packages/__VUE/textarea/index.vue
deleted file mode 100644
index 90eb872d79..0000000000
--- a/src/packages/__VUE/textarea/index.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
-  <view :class="classes">
-    <textarea
-      ref="textareaRef"
-      class="nut-textarea__textarea"
-      :style="styles"
-      :rows="rows"
-      :disabled="disabled"
-      :readonly="readonly"
-      :value="modelValue"
-      :maxlength="maxLength"
-      :placeholder="placeholder || translate('placeholder')"
-      :autofocus="autofocus"
-      @input="change"
-      @blur="blur"
-      @focus="focus"
-      @change="endComposing"
-      @compositionend="endComposing"
-      @compositionstart="startComposing"
-    />
-    <view v-if="limitShow" class="nut-textarea__limit"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
-  </view>
-</template>
-<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
-<script lang="ts">
-import { watch, ref, computed, onMounted, nextTick, toRef } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { useLocale } from '@/packages/utils/useLocale'
-import { useFormDisabled } from '../form/common'
-
-export interface InputTarget extends HTMLInputElement {
-  composing: boolean
-}
-
-const { create } = createComponent('textarea')
-const cN = 'NutTextarea'
-
-export default create({
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    textAlign: {
-      type: String,
-      default: ''
-    },
-    limitShow: {
-      type: Boolean,
-      default: false
-    },
-    maxLength: {
-      type: [String, Number],
-      default: ''
-    },
-    rows: {
-      type: [String, Number],
-      default: '2'
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    autosize: {
-      type: [Boolean, Object],
-      default: false
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['update:modelValue', 'change', 'blur', 'focus'],
-
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'))
-    const translate = useLocale(cN)
-    const textareaRef = ref()
-    const classes = computed(() => {
-      const prefixCls = 'nut-textarea'
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--disabled`]: disabled.value
-      }
-    })
-
-    onMounted(() => {
-      if (props.modelValue) {
-        emitChange(String(props.modelValue))
-      }
-      if (props.autosize) {
-        nextTick(getContentHeight)
-      }
-    })
-
-    const styles: any = computed(() => {
-      return {
-        textAlign: props.textAlign
-        // resize: props.autosize ? 'vertical' : 'none'
-      }
-    })
-
-    const getContentHeight = () => {
-      let textarea = textareaRef.value
-      textarea.style.height = 'auto'
-      let height = textarea.scrollHeight
-      if (typeof props.autosize === 'object') {
-        const { maxHeight, minHeight } = props.autosize
-        if (maxHeight !== undefined) {
-          height = Math.min(height, maxHeight)
-        }
-        if (minHeight !== undefined) {
-          height = Math.max(height, minHeight)
-        }
-      }
-      if (height) {
-        textarea.style.height = height + 'px'
-      }
-    }
-
-    watch(
-      () => props.modelValue,
-      () => {
-        if (props.autosize) {
-          nextTick(getContentHeight)
-        }
-      }
-    )
-
-    const emitChange = (value: string, event?: Event) => {
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.substring(0, Number(props.maxLength))
-      }
-      emit('update:modelValue', value, event)
-      emit('change', value, event)
-    }
-
-    const change = (event: Event) => {
-      if (!(event.target as InputTarget)!.composing) {
-        const input = event.target as HTMLInputElement
-        let value = input.value
-        if (props.maxLength && value.length > Number(props.maxLength)) {
-          value = value.slice(0, Number(props.maxLength))
-        }
-        emitChange(input.value, event)
-      }
-      // const input = event.target as HTMLInputElement;
-      // emitChange(input.value, event);
-    }
-
-    const focus = (event: Event) => {
-      if (disabled.value) return
-      if (props.readonly) return
-      emit('focus', event)
-    }
-
-    const blur = (event: Event) => {
-      if (disabled.value) return
-      if (props.readonly) return
-      const input = event.target as HTMLInputElement
-
-      let value = input.value
-
-      emitChange(value, event)
-      emit('blur', { value, event })
-    }
-
-    const startComposing = ({ target }: Event) => {
-      (target as InputTarget)!.composing = true
-    }
-
-    const endComposing = ({ target }: Event) => {
-      if ((target as InputTarget)!.composing) {
-        (target as InputTarget)!.composing = false
-        ;(target as InputTarget)!.dispatchEvent(new Event('input'))
-      }
-    }
-
-    return {
-      textareaRef,
-      classes,
-      styles,
-      disabled,
-      change,
-      focus,
-      blur,
-      translate,
-      startComposing,
-      endComposing
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/textarea/textarea.taro.vue b/src/packages/__VUE/textarea/textarea.taro.vue
new file mode 100644
index 0000000000..2e7e25cc68
--- /dev/null
+++ b/src/packages/__VUE/textarea/textarea.taro.vue
@@ -0,0 +1,244 @@
+<template>
+  <view :class="classes">
+    <textarea
+      ref="textareaRef"
+      v-bind="$attrs"
+      :class="['nut-textarea__textarea', env == 'ALIPAY' && 'nut-textarea__ali']"
+      :style="styles"
+      :rows="rows"
+      :disabled="disabled || readonly"
+      :value="modelValue"
+      :show-count="false"
+      :maxlength="maxLength ? maxLength : -1"
+      :placeholder="placeholder || translate('placeholder')"
+      :auto-focus="autofocus"
+      @input="change"
+      @blur="blur"
+      @focus="focus"
+      @change="endComposing"
+      @compositionend="endComposing"
+      @compositionstart="startComposing"
+    />
+    <view v-if="limitShow" class="nut-textarea__limit"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
+    <view v-if="autosize" class="nut-textarea__cpoyText" :style="copyTextStyle">{{ modelValue }}</view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { type CSSProperties, computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
+import Taro from '@tarojs/taro'
+import { useLocale } from '@/packages/utils/useLocale'
+import { useFormDisabled } from '../form/common'
+
+const cN = 'NutTextarea'
+
+defineOptions({
+  name: cN,
+  inheritAttrs: false
+})
+
+export interface InputTarget extends HTMLInputElement {
+  composing?: boolean
+}
+
+export type TextareaProps = Partial<{
+  modelValue: string
+  textAlign: 'left' | 'center' | 'right'
+  limitShow: boolean
+  maxLength: string | number
+  rows: string | number
+  placeholder: string
+  readonly: boolean
+  disabled: boolean
+  autosize: boolean | Record<string, number>
+  autofocus: boolean
+}>
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  modelValue: '',
+  limitShow: false,
+  maxLength: '',
+  rows: '2',
+  placeholder: '',
+  readonly: false,
+  disabled: false,
+  autosize: false,
+  autofocus: false
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus'])
+
+const disabled = useFormDisabled(toRef(props, 'disabled'))
+const translate = useLocale(cN)
+const textareaRef = ref<any>(null)
+const textareaHeight = ref(20)
+const heightSet = ref('auto')
+const composing = ref(false)
+const env = Taro.getEnv()
+
+const classes = computed(() => {
+  const prefixCls = 'nut-textarea'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--disabled`]: disabled.value
+  }
+})
+
+const styles = computed(() => {
+  const styleObj: CSSProperties = {}
+  if (props.textAlign) {
+    styleObj['textAlign'] = props.textAlign
+  }
+  if (props.autosize) {
+    styleObj['height'] = heightSet.value
+  }
+  return styleObj
+})
+
+const copyTextStyle = ref<CSSProperties>({
+  wordBreak: 'break-all',
+  width: '0'
+})
+
+const emitChange = (value: string, event: Event) => {
+  if (props.maxLength && value.length > Number(props.maxLength)) {
+    value = value.substring(0, Number(props.maxLength))
+  }
+  emit('update:modelValue', value, event)
+  emit('change', value, event)
+}
+
+const change = (event: Event) => {
+  if (env === Taro.ENV_TYPE.WEB) {
+    if (!composing.value) {
+      _onInput(event)
+    }
+  } else {
+    _onInput(event)
+  }
+}
+
+const _onInput = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  let value = input.value
+  if (props.maxLength && value.length > Number(props.maxLength)) {
+    value = value.slice(0, Number(props.maxLength))
+  }
+  emitChange(value, event)
+}
+
+const focus = (event: Event) => {
+  if (disabled.value || props.readonly) return
+  emit('focus', event)
+}
+
+const blur = (event: Event) => {
+  if (disabled.value || props.readonly) return
+  const input = event.target as HTMLInputElement
+  const value = input.value
+  emitChange(value, event)
+  emit('blur', event)
+}
+
+const getContentHeight = () => {
+  heightSet.value = 'auto'
+  let height = textareaHeight.value
+  if (typeof props.autosize === 'object') {
+    const { maxHeight, minHeight } = props.autosize
+    if (maxHeight !== undefined) {
+      height = Math.min(height, maxHeight)
+    }
+    if (minHeight !== undefined) {
+      height = Math.max(height, minHeight)
+    }
+  }
+  if (height) {
+    heightSet.value = height + 'px'
+  }
+}
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.autosize) {
+      setTimeout(() => {
+        copyHeight()
+      }, 100)
+    }
+  }
+)
+
+const copyHeight = () => {
+  const query = Taro.createSelectorQuery()
+  query.select('.nut-textarea__cpoyText').boundingClientRect()
+  query.exec((res) => {
+    if (res[0]) {
+      if (props.modelValue == '') {
+        textareaHeight.value = 20
+      } else {
+        textareaHeight.value = res[0]['height'] || 20
+      }
+      nextTick(getContentHeight)
+    }
+  })
+}
+
+const getRefHeight = () => {
+  const query = Taro.createSelectorQuery()
+  query.selectAll('.nut-textarea__textarea').boundingClientRect()
+  let uid = textareaRef.value ? textareaRef.value.uid : '0'
+  query.exec((res: any) => {
+    if (res[0] && textareaRef.value) {
+      let _item: any = Array.from(res[0]).filter((item: any) => item.id == uid)
+      if (_item[0]) {
+        if (env !== Taro.ENV_TYPE.WEAPP) {
+          textareaHeight.value = _item[0]['height'] || 20
+        }
+        copyTextStyle.value.width = _item[0]['width'] + 'px'
+      }
+      nextTick(getContentHeight)
+    }
+  })
+}
+
+const getRefWidth = () => {
+  const query = Taro.createSelectorQuery()
+  query.select('.nut-textarea__textarea').boundingClientRect()
+  query.exec((res: any) => {
+    if (res[0] && textareaRef.value) {
+      copyTextStyle.value.width = res[0]['width'] + 'px'
+    }
+  })
+}
+
+onMounted(() => {
+  if (props.autosize) {
+    Taro.nextTick(() => {
+      setTimeout(() => {
+        if (env === 'ALIPAY' || env === 'WEB') {
+          getRefWidth()
+          copyHeight()
+        } else {
+          getRefHeight()
+        }
+      }, 300)
+    })
+  }
+})
+
+const startComposing = () => {
+  if (env === Taro.ENV_TYPE.WEB) {
+    composing.value = true
+  }
+}
+
+const endComposing = ({ target }: Event) => {
+  if (env === Taro.ENV_TYPE.WEB) {
+    if (composing.value) {
+      composing.value = false
+      if (target) {
+        target.dispatchEvent?.(new Event('input'))
+      }
+    }
+  }
+}
+</script>
diff --git a/src/packages/__VUE/textarea/textarea.vue b/src/packages/__VUE/textarea/textarea.vue
new file mode 100644
index 0000000000..4550d44c59
--- /dev/null
+++ b/src/packages/__VUE/textarea/textarea.vue
@@ -0,0 +1,174 @@
+<template>
+  <view :class="classes">
+    <textarea
+      ref="textareaRef"
+      class="nut-textarea__textarea"
+      :style="styles"
+      :rows="rows"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="modelValue"
+      :maxlength="maxLength"
+      :placeholder="placeholder || translate('placeholder')"
+      :autofocus="autofocus"
+      @input="change"
+      @blur="blur"
+      @focus="focus"
+      @change="endComposing"
+      @compositionend="endComposing"
+      @compositionstart="startComposing"
+    />
+    <view v-if="limitShow" class="nut-textarea__limit"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { type CSSProperties, watch, ref, computed, onMounted, nextTick, toRef } from 'vue'
+import { useLocale } from '@/packages/utils/useLocale'
+import { useFormDisabled } from '../form/common'
+
+const cN = 'NutTextarea'
+defineOptions({
+  name: cN
+})
+
+export interface InputTarget extends HTMLInputElement {
+  composing: boolean
+}
+
+export type TextareaProps = Partial<{
+  modelValue: string
+  textAlign: 'left' | 'center' | 'right'
+  limitShow: boolean
+  maxLength: string | number
+  rows: string | number
+  placeholder: string
+  readonly: boolean
+  disabled: boolean
+  autosize: boolean | Record<string, number>
+  autofocus: boolean
+}>
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  modelValue: '',
+  limitShow: false,
+  maxLength: '',
+  rows: '2',
+  placeholder: '',
+  readonly: false,
+  disabled: false,
+  autosize: false,
+  autofocus: false
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus'])
+
+const disabled = useFormDisabled(toRef(props, 'disabled'))
+const translate = useLocale(cN)
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const classes = computed(() => {
+  const prefixCls = 'nut-textarea'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--disabled`]: disabled.value
+  }
+})
+
+const styles = computed(() => {
+  return {
+    textAlign: props.textAlign
+  } as CSSProperties
+})
+
+const setHeight = (height: string | number) => {
+  const textarea = textareaRef.value
+  if (textarea && textarea.style) {
+    textarea.style.height = typeof height === 'number' ? `${height}px` : height
+  }
+}
+
+const getContentHeight = () => {
+  setHeight('auto')
+  if (textareaRef.value) {
+    let height = textareaRef.value.scrollHeight
+    if (typeof props.autosize === 'object') {
+      const { maxHeight, minHeight } = props.autosize
+      if (maxHeight !== undefined) {
+        height = Math.min(height, maxHeight)
+      }
+      if (minHeight !== undefined) {
+        height = Math.max(height, minHeight)
+      }
+    }
+    if (height) {
+      setHeight(height)
+    }
+  }
+}
+
+onMounted(() => {
+  if (props.modelValue) {
+    emitChange(String(props.modelValue))
+  }
+  if (props.autosize) {
+    nextTick(getContentHeight)
+  }
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.autosize) {
+      nextTick(getContentHeight)
+    }
+  }
+)
+
+const emitChange = (value: string, event?: Event) => {
+  if (props.maxLength && value.length > Number(props.maxLength)) {
+    value = value.substring(0, Number(props.maxLength))
+  }
+  emit('update:modelValue', value, event)
+  emit('change', value, event)
+}
+
+const change = (event: Event) => {
+  const input = event.target as InputTarget
+  if (!input.composing) {
+    let value = input.value
+    if (props.maxLength && value.length > Number(props.maxLength)) {
+      value = value.slice(0, Number(props.maxLength))
+    }
+    emitChange(input.value, event)
+  }
+}
+
+const focus = (event: Event) => {
+  if (disabled.value || props.readonly) return
+  emit('focus', event)
+}
+
+const blur = (event: Event) => {
+  if (disabled.value || props.readonly) return
+
+  const input = event.target as HTMLInputElement
+  const value = input.value
+
+  emitChange(value, event)
+  emit('blur', { value, event })
+}
+
+const startComposing = ({ target }: Event) => {
+  const input = target as InputTarget
+  input.composing = true
+}
+
+const endComposing = ({ target }: Event) => {
+  const input = target as InputTarget
+  if (input.composing) {
+    input.composing = false
+    input.dispatchEvent(new Event('input'))
+  }
+}
+</script>