[犀牛鸟]feat(Textarea): add clearable prop to support clearing content

packages/components/textarea/_example/base.vue

@@ -15,6 +15,8 @@
       name="description"
       :autosize="{ minRows: 3, maxRows: 5 }"
     />
+
+    <t-textarea v-model="value4" placeholder="可清空的文本框" name="description" clearable />
   </t-space>
 </template>
 <script lang="ts" setup>
@@ -24,6 +26,7 @@ import type { TextareaProps } from 'tdesign-vue-next';
 const value = ref('');
 const value2 = ref('');
 const value3 = ref('');
+const value4 = ref('这是测试内容，可以点击右侧的清空按钮来清空');
 const onChange: TextareaProps['onChange'] = (value, e) => {
   console.log('onChange：', value, e);
 };

packages/components/textarea/props.ts

@@ -54,6 +54,11 @@ export default {
       return ['default', 'success', 'warning', 'error'].includes(val);
     },
   },
+  /** 是否可清空 */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
   /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */
   tips: {
     type: [String, Function] as PropType<TdTextareaProps['tips']>,

packages/components/textarea/textarea.tsx

@@ -5,6 +5,7 @@
   ref,
   nextTick,
   onMounted,
+  onUpdated,
   toRefs,
   inject,
   StyleValue,
@@ -144,7 +145,7 @@
     };
 
     // computed
     const textareaClasses = computed(() => {
       return [
         name.value,
         {
@@ -227,6 +228,13 @@
         onKeypress: emitKeypress,
       });
       const { STATUS } = useCommonClassName();
+      const textareaClasses = computed(() => [
+        `${name.value}`,
+        {
+          [`${name.value}--clearable`]: props.clearable,
+        },
+      ]);
+
       const classes = computed(() => [
         `${name.value}__inner`,
         {
@@ -254,6 +262,61 @@
           }`}</span>
         ));
 
+      // 清空按钮 - 使用CSS变量适配白天/夜间模式
+      const clearIcon =
+        props.clearable && innerValue.value ? (
+          <span
+            onClick={(e: any) => {
+              e.stopPropagation();
+              setInnerValue('');
+            }}
+            onMouseenter={(e: any) => {
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--td-bg-color-container-hover)';
+              (e.currentTarget as HTMLElement).style.color = 'var(--td-brand-color)';
+            }}
+            onMouseleave={(e: any) => {
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'transparent';
+              (e.currentTarget as HTMLElement).style.color = 'var(--td-text-color-secondary)';
+              (e.currentTarget as HTMLElement).style.transform = '';
+            }}
+            onMousedown={(e: any) => {
+              (e.currentTarget as HTMLElement).style.transform = 'scale(0.85)';
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--td-bg-color-container-active)';
+            }}
+            onMouseup={(e: any) => {
+              (e.currentTarget as HTMLElement).style.transform = '';
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--td-bg-color-container-hover)';
+            }}
+            title="清空内容"
+            style={{
+              position: 'absolute',
+              top: '8px',
+              right: '8px',
+              zIndex: '10',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '32px',
+              height: '32px',
+              cursor: 'pointer',
+              borderRadius: '50%',
+              backgroundColor: 'transparent',
+              transition: 'all 0.2s ease',
+              color: 'var(--td-text-color-secondary)',
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M11 5L5 11M5 5L11 11"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+        ) : null;
+
       return (
         <div class={textareaClasses.value} {...omit(attrs, ['style'])}>
           <textarea
@@ -266,6 +329,7 @@
             {...inputEvents}
             {...inputAttrs.value}
           ></textarea>
+          {clearIcon}
           {textTips || limitText ? (
             <div
               class={[

packages/components/textarea/type.ts

@@ -52,6 +52,11 @@ export interface TdTextareaProps {
    * @default default
    */
   status?: 'default' | 'success' | 'warning' | 'error';
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
   /**
    * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
    */