Skip to content

[犀牛鸟]feat(textarea): add clearable to support clearing func - #6785

Open
LiamFan16-mikasa wants to merge 4 commits into
Tencent:developfrom
LiamFan16-mikasa:feat/textarea-clearable
Open

[犀牛鸟]feat(textarea): add clearable to support clearing func#6785
LiamFan16-mikasa wants to merge 4 commits into
Tencent:developfrom
LiamFan16-mikasa:feat/textarea-clearable

Conversation

@LiamFan16-mikasa

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

Copy link
Copy Markdown

closes Tencent/tdesign-common#2566

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

本 Issue 是 Tencent/tdesign-common#2566
依赖PR:Tencent/tdesign-common#2613

💡 需求背景和解决方案

  1. Textarea 当前缺少与 Input 一致的可清空能力。用户输入多行文本后,需要手动选中或删除才能清空,操作成本较高。
  2. 本 PR 在 Vue3 侧实现 Textarea 的 clearable 能力,新增 clearable 属性和 onClear 事件。

实现内容:

  • 新增 clearable 属性,控制是否展示清空按钮,默认 false
  • 新增 onClear 事件,点击清空按钮时触发,同步清空内部受控值、原生 DOM 值并重新计算高度
  • 清空图标仅在"可清空 + 有内容 + 鼠标悬浮"时显示,交互习惯与 Input 组件保持一致
  • 补充中英文 API 文档、demo 示例、6 个单元测试用例

核心改进点与优化:

  • 复用了 Input 已有的清空图标交互习惯,而非另起一套显隐逻辑
  • 修复了组件文档站"配置"面板遗漏 clearable 开关的问题
  • 公共样式单独提交到 tdesign-common,符合仓库跨框架复用的架构约定

效果展示:
chrome-capture-2026-07-06
chrome-capture-2026-07-06 (1)

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-vue-next

  • feat(textarea): 新增 clearable 属性和 onClear 事件,支持一键清空内容
  • fix(textarea): 修复新增属性未同步到组件文档"配置"面板的问题

@tdesign-vue-next/chat

@tdesign-vue-next/nuxt

@tdesign-vue-next/auto-import-resolver

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

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

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

@Wesley-0808 Wesley-0808 changed the title feat(textarea): add clearable to support clearing func [犀牛鸟]feat(textarea): add clearable to support clearing func Jul 20, 2026
@tdesign-bot

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-vue-next 完成
@tdesign-vue-next/chat 完成

@pkg-pr-new

pkg-pr-new Bot commented Jul 29, 2026

Copy link
Copy Markdown
  • tdesign-vue-next-demo

    npm i https://pkg.pr.new/@tdesign-vue-next/auto-import-resolver@6785
    
    npm i https://pkg.pr.new/tdesign-vue-next@6785
    
    npm i https://pkg.pr.new/@tdesign-vue-next/chat@6785
    
    npm i https://pkg.pr.new/@tdesign-vue-next/nuxt@6785
    

commit: f8fc7ed

@uyarn uyarn added the 💭 discussion we are discussing label Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💭 discussion we are discussing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Textarea] 增加可清空内容

3 participants