Skip to content

feat(textarea): add clearable styles and docs - #2613

Closed
LiamFan16-mikasa wants to merge 1 commit into
Tencent:developfrom
LiamFan16-mikasa:feat/textarea-clearable
Closed

feat(textarea): add clearable styles and docs#2613
LiamFan16-mikasa wants to merge 1 commit into
Tencent:developfrom
LiamFan16-mikasa:feat/textarea-clearable

Conversation

@LiamFan16-mikasa

@LiamFan16-mikasa LiamFan16-mikasa commented Jul 6, 2026

Copy link
Copy Markdown

close #2566

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

本 PR 是 #2566 的跨框架公共样式与文档补充部分,配合 Vue3 侧组件逻辑一起解决该 issue。

配套的 Vue3 侧实现(clearable 属性、onClear 事件、单元测试、demo)见:Tencent/tdesign-vue-next#6785

💡 需求背景和解决方案

  1. Textarea 当前缺少与 Input 一致的清空能力。用户输入多行文本后,需要手动选中或删除才能清空,操作成本较高。
  2. 本 PR 在 common 侧补充 Textarea clearable 的公共样式和文档示例入口,为 Vue3 等框架实现提供统一的视觉基础。

实现内容:

  • 新增 Textarea clearable 相关样式变量(图标颜色、hover 颜色、定位间距)
  • 新增 .t-textarea--clearable.t-textarea__clear 样式
  • 清空图标的颜色、间距复用现有 TDesign token,与 Input 的清空图标保持视觉一致
  • 图标定位在右上角,与 Textarea 首行文本视觉对齐
  • 在 common API 文档中新增 clearable 示例入口,由框架仓库提供对应 demo 实现

核心改进点与优化:

样式方案对齐现有 Input clearable 的视觉语言,但显隐逻辑不同:Input 通过 CSS 的 opacity/visibility 配合 :hover 控制显隐,Textarea 框架侧(Vue3)是通过 JS 判断鼠标悬浮状态来控制图标渲染,因此 common 侧样式只处理图标的定位和颜色,不额外做显隐动画,避免逻辑重复。

效果展示:
chrome-capture-2026-07-06

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-common

  • feat(textarea): 新增清空按钮相关公共样式与文档结构

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@uyarn

uyarn commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator

谢谢参与犀牛鸟活动,综合实现的视觉效果和代码逻辑,决定采纳 #2583 继续推进

@uyarn uyarn closed this Aug 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Textarea] 增加可清空内容

2 participants