From d370e51c02a3cc71719468f3cf4219e43fbfbb5b Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Sun, 1 Feb 2026 09:17:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(dev):=20=E6=B7=BB=E5=8A=A0=E5=A4=9A?=
 =?UTF-8?q?=E8=A1=8C=E6=96=87=E6=9C=AC=E8=BE=93=E5=85=A5=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?CuteTextAreaInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增多行文本输入组件CuteTextAreaInput.vue
- 集成到组件演示页面CuteOtherDemo中
- 配置组件基础属性如禁用、只读、最大长度等
- 实现内容双向绑定和输入事件处理
- 设置自动调整高度和字数限制功能
---
 .../components/dev/CuteTextAreaInput.vue      | 55 +++++++++++++++++++
 .../views/componentsDemo/CuteOtherDemo.vue    |  4 ++
 2 files changed, 59 insertions(+)
 create mode 100644 cutejava-front/src/views/components/dev/CuteTextAreaInput.vue

diff --git a/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
new file mode 100644
index 00000000..4778028f
--- /dev/null
+++ b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
@@ -0,0 +1,55 @@
+<!--
+ * 多行文本输入组件
+ * @author odboy
+ * @email tianjun@odboy.cn
+ * @created 2026-02-01
+ -->
+<template>
+  <el-input
+    v-model="content"
+    type="textarea"
+    :autosize="{ minRows: 1, maxRows: 5}"
+    placeholder="请输入内容"
+    :maxlength="maxlength"
+    :disabled="disabled"
+    show-word-limit
+    :clearable="true"
+    resize="vertical"
+    autocomplete="false"
+    auto-complete="false"
+    :readonly="readonly"
+    style="width: 100%"
+    @input="handleInput"
+  />
+</template>
+
+<script>
+export default {
+  name: 'CuteTextAreaInput',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: {
+      type: Number,
+      default: 120
+    }
+  },
+  data() {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    handleInput(value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
index 36f77169..6b83ec6f 100644
--- a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
@@ -24,6 +24,8 @@
       <el-table-column prop="name" label="姓名" />
       <el-table-column prop="description" label="备注" />
     </cute-transfer>
+    <cute-section-title title="多行输入文本 CuteTextAreaInput" />
+    <cute-text-area-input />
     <cute-section-title title="链接 CuteLink" />
     <cute-link title="百度一下" href="https://www.baidu.com" />
     <cute-section-title title="空状态 CuteNoData" />
@@ -70,10 +72,12 @@ import CuteScreenShot from '@/views/components/dev/CuteScreenShot.vue'
 import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
 import CuteButton from '@/views/components/dev/CuteButton.vue'
 import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
+import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
 
 export default {
   name: 'CuteOtherDemo',
   components: {
+    CuteTextAreaInput,
     CuteTransfer,
     CuteButton,
     CuteSectionTitle,