Skip to content

chore(ActionSheet): separate ActionSheet components and ActionSheetPlugin#2122

Merged
anlyyao merged 6 commits into
developfrom
chore/ActionSheet/export
Jan 23, 2026
Merged

chore(ActionSheet): separate ActionSheet components and ActionSheetPlugin#2122
anlyyao merged 6 commits into
developfrom
chore/ActionSheet/export

Conversation

@anlyyao
Copy link
Copy Markdown
Collaborator

@anlyyao anlyyao commented Jan 5, 2026

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

fix #2121

💡 需求背景和解决方案

背景 1:按需引入时组件和函数式调用混用导致表现不一致
可复现仓库地址:https://github.com/tonny3548/test-tdesign-bugs.git

40aab98b4321597ed70eac7f295a242e.mov

问题分析:在 src/action-sheet/index.ts 中,导出的 _ActionSheet 是一个混合对象,同时具有 Vue 组件特性和函数式 API 特性。当用户按需引入 import { ActionSheet } from 'tdesign-mobile-vue' 时,由于 src/components.ts 使用了 export * from './action-sheet',这会导出所有内容,导致内联和函数式调用混用,出现表现不一致问题。

方案:分离导出组件和函数式 API


// 1. 作为组件使用 (按需引入)
import { ActionSheet } from 'tdesign-mobile-vue';
app.use(ActionSheet);
// <t-action-sheet v-model="visible" />

// 2. 作为函数使用 (按需引入)
import { ActionSheetPlugin } from 'tdesign-mobile-vue';
ActionSheetPlugin.show({ items: ['选项1', '选项2'] });

// 3. 全量引入
import TDesign from 'tdesign-mobile-vue';
app.use(TDesign);  // 会注册 ActionSheet 组件,不注册 Plugin

背景 2: 函数式调用控制台告警

wecom-temp-263585-f85aefbb950c892b58aa62ff97841ceb

方案:参考 Dialog,使用 reactive 包装所有 props(包括 visible: false),然后通过 Vue 的 h 函数渲染组件

📝 更新日志

  • break(ActionSheet): 调整导出方式,分离组件和函数式 API 的使用方式

  • fix(ActionSheet): 修复按需引入时组件和函数式调用混用导致表现不一致的问题

  • fix(ActionSheet): 修复函数式调用时控制台告警

  • feat(ActionSheet): 新增 ActionSheetPlugin 导出,提供独立的函数式调用 API

  • 本条 PR 不需要纳入 Changelog

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

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

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

@anlyyao anlyyao changed the title chore(ActionSheet): separate ActionSheet components and ActionSheetPl… 【WIP】chore(ActionSheet): separate ActionSheet components and ActionSheetPlugin Jan 5, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 5, 2026

完成

@anlyyao
Copy link
Copy Markdown
Collaborator Author

anlyyao commented Jan 5, 2026

/update-snapshot

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 5, 2026

⏳ 正在运行快照更新。。。 CI: Open

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jan 5, 2026

commit: 4181b6b

@anlyyao anlyyao changed the title 【WIP】chore(ActionSheet): separate ActionSheet components and ActionSheetPlugin chore(ActionSheet): separate ActionSheet components and ActionSheetPlugin Jan 5, 2026
@liweijie0812
Copy link
Copy Markdown
Collaborator

liweijie0812 commented Jan 7, 2026

控制台警告
image

Comment thread src/action-sheet/index.ts Outdated
@anlyyao anlyyao force-pushed the chore/ActionSheet/export branch from 2a47f63 to 7d8e271 Compare January 23, 2026 04:32
@anlyyao anlyyao merged commit 793490d into develop Jan 23, 2026
9 checks passed
@anlyyao anlyyao deleted the chore/ActionSheet/export branch January 23, 2026 06:07
@github-actions github-actions Bot mentioned this pull request Jan 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Actionsheet] 使用示例的v-model导致无法控制弹层显示与隐藏

2 participants