From c63062e96f46b3c4e3d86160358d8cf9037118aa Mon Sep 17 00:00:00 2001
From: oasis-cloud <suanbanren@foxmail.com>
Date: Thu, 2 Jan 2025 10:52:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(textarea):=20=E5=AD=97=E6=95=B0=E9=99=90?=
 =?UTF-8?q?=E5=88=B6=E6=96=87=E6=9C=AC=E9=81=AE=E6=8C=A1=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E7=9A=84=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/textarea/doc.en-US.md  | 1 +
 src/packages/textarea/doc.md        | 1 +
 src/packages/textarea/doc.taro.md   | 1 +
 src/packages/textarea/doc.zh-TW.md  | 1 +
 src/packages/textarea/textarea.scss | 7 +++----
 src/styles/variables.scss           | 1 +
 6 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/packages/textarea/doc.en-US.md b/src/packages/textarea/doc.en-US.md
index 4fed75f56c..cedfe0032e 100644
--- a/src/packages/textarea/doc.en-US.md
+++ b/src/packages/textarea/doc.en-US.md
@@ -107,3 +107,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-textarea-text-color | text color | `$color-title` |
 | \--nutui-textarea-text-curror-color | caret color | `$color-title` |
 | \--nutui-textarea-disabled-color | disabled color | `$color-text-disabled` |
+| \--nutui-textarea-limit-align | text align | `right` |
diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md
index 829f6d59c3..2bee9f1787 100644
--- a/src/packages/textarea/doc.md
+++ b/src/packages/textarea/doc.md
@@ -107,3 +107,4 @@ import { TextArea } from '@nutui/nutui-react'
 | \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
 | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
 | \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
+| \--nutui-textarea-limit-align | 对齐方式 | `right` |
diff --git a/src/packages/textarea/doc.taro.md b/src/packages/textarea/doc.taro.md
index 9040ac8e67..207c50a3a3 100644
--- a/src/packages/textarea/doc.taro.md
+++ b/src/packages/textarea/doc.taro.md
@@ -107,3 +107,4 @@ import { TextArea } from '@nutui/nutui-react-taro'
 | \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
 | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
 | \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
+| \--nutui-textarea-limit-align | 对齐方式 | `right` |
diff --git a/src/packages/textarea/doc.zh-TW.md b/src/packages/textarea/doc.zh-TW.md
index eaf6bfb943..56baf708ef 100644
--- a/src/packages/textarea/doc.zh-TW.md
+++ b/src/packages/textarea/doc.zh-TW.md
@@ -106,3 +106,4 @@ import { TextArea } from '@nutui/nutui-react'
 | \--nutui-textarea-text-color | 文本顏色 | `$color-title` |
 | \--nutui-textarea-text-curror-color | 光標顏色 | `$color-title` |
 | \--nutui-textarea-disabled-color | 禁用顏色 | `$color-text-disabled` |
+| \--nutui-textarea-limit-align | 對齊方式 | `right` |
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index ae1140e1c7..e681c40763 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -1,8 +1,9 @@
 .nut-textarea {
+  display: flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  display: flex;
   background: $color-background-overlay;
   font-size: $textarea-font;
   padding: $textarea-padding;
@@ -16,11 +17,9 @@
   }
 
   &-limit {
-    position: absolute;
-    right: 15px;
-    bottom: 12px;
     font-size: $textarea-font;
     color: $textarea-limit-color;
+    text-align: $textarea-limit-align;
   }
 
   &-textarea {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c5f68ee5d8..e8964178fd 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -587,6 +587,7 @@ $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 $textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
 $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
 $textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default;
+$textarea-limit-align: var(--nutui-textarea-limit-align, right) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,