feat: ✨ Toast 支持通过props设置组件属性并新增居中显示的配置#888
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough该 PR 主要对 Toast 组件的文档说明、样式、逻辑和类型定义进行了更新。文档部分新增了提示信息、演示示例和参数（如 loadingSize、iconColor、cover 等）的详细说明；页面新增了两个 toast 展示函数并调整了参数；样式文件引入了新的消息文本混入以及重命名了定位混入；组件代码简化了默认选项及关闭逻辑，同时对属性合并和方向响应处理进行了优化；类型定义也扩展了位置和布局方向的选项。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant I as Index.vue
participant T as Toast逻辑
participant W as wd-toast组件
U->>I: 点击按钮 (触发 showMiddletoast/showLoadingToast3)
I->>T: 调用对应的 toast 方法
T->>W: 通过 mergeOptionsWithProps 合并选项与 props
W-->>U: 渲染并显示 toast
Note over W: Toast 显示后等待关闭操作
W->>W: 调用 close() 更新显示状态
W-->>U: 隐藏 toast
Possibly related PRs
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Moonofweisheng
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/pages/toast/Index.vue (2)
20-20: 函数命名不一致。函数命名风格与其他函数不一致，建议修改为
showMiddleToast以保持一致性。- <wd-button @click="showMiddletoast">局中toast</wd-button> + <wd-button @click="showMiddleToast">局中toast</wd-button>
69-81: 函数命名不一致。函数命名风格与其他函数不一致，建议修改为
showMiddleToast以保持一致性。-function showMiddletoast() { +function showMiddleToast() { toast.show({ position: 'middle', iconClass: 'star', msg: '提示信息', closed() { console.log(232) }, opened() { console.log(2323232) } }) }src/uni_modules/wot-design-uni/components/wd-toast/types.ts (1)
16-16: 位置类型的顺序建议调整。建议按照从上到下的顺序排列位置类型，使其更直观：
'top' | 'middle-top' | 'middle' | 'bottom'。src/uni_modules/wot-design-uni/components/wd-toast/index.scss (1)
20-25: 建议优化字体族列表建议按照以下方式优化字体族列表，以提供更好的跨平台支持：
- font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;docs/component/toast.md (1)
59-60: 建议补充位置说明建议为不同位置添加更详细的说明，帮助用户理解各个位置的具体表现。
- 通过设置 `position` 属性，可以设置提示信息的位置，默认为 `middle-top`。 + 通过设置 `position` 属性，可以设置提示信息的位置，默认为 `middle-top`。各个位置说明如下： + - `top`: 位于屏幕顶部 + - `middle-top`: 位于屏幕中上方（默认） + - `middle`: 位于屏幕正中央 + - `bottom`: 位于屏幕底部
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/component/toast.md(3 hunks)src/pages/toast/Index.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-toast/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-toast/index.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-toast/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue(6 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/component/toast.md
6-6: Link fragments should be valid
null
(MD051, link-fragments)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (8)
src/pages/toast/Index.vue (1)
106-114: 长文本加载提示的实现看起来不错。新增的
showLoadingToast3函数实现了纵向布局的长文本加载提示，代码结构清晰。src/uni_modules/wot-design-uni/components/wd-toast/types.ts (1)
74-196: 属性文档完善，类型定义清晰。
toastProps的属性定义非常完善：
- 每个属性都有详细的类型注释
- 默认值清晰明确
- 属性分组合理
src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue (1)
173-188: 选项合并逻辑优化得很好。
mergeOptionsWithProps函数的实现：
- 逻辑清晰，易于维护
- 统一处理了所有属性的合并
- 保持了选项优先级
src/uni_modules/wot-design-uni/components/wd-toast/index.ts (2)
11-13: 默认选项简化得很好。将
defaultOptions简化为只包含show属性是个好的改进：
- 减少了重复配置
- 使代码更易维护
- 让属性管理更清晰
60-62: 关闭函数实现更简洁。
close函数的新实现更加简洁明了，直接重置为包含show: false的新对象是个好方法。src/uni_modules/wot-design-uni/components/wd-toast/index.scss (1)
59-61: 新增的中上位置实现正确
middle-top位置的实现使用了合适的 transform 值，可以确保 Toast 在视觉上的正确定位。docs/component/toast.md (2)
5-7: 提示信息清晰明确提示信息准确说明了
props和options的优先级关系，对用户很有帮助。🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
6-6: Link fragments should be valid
null(MD051, link-fragments)
124-142: 属性表格内容完整属性表格的内容非常完整，包含了所有必要的参数说明。建议检查链接片段。
❌ Verification inconclusive
🌐 Web query:
markdownlint 中的 MD051 (link-fragments) 规则是什么？如何修复？💡 Result:
MD051（link-fragments）是 markdownlint 中用于验证 Markdown 文档内部链接片段有效性的规则。该规则要求文档内的锚点链接（形如
[text](#fragment)）必须指向实际存在的标题片段。规则核心机制
自动生成标题片段：
Markdown 标题会根据内容自动生成 URL 片段，转换规则为：
- 去除特殊符号
- 空格替换为连字符
-- 强制转换为小写
例如：## Hello World!会生成片段hello-world验证逻辑：
当链接片段与任何标题生成的片段不匹配时触发警告。例如：[错误示例](#HelloWorld) <!-- 未匹配 hello-world -->常见修复方法
方法 1：修正链接片段
- [链接](#旧片段) + [链接](#修正后的片段)需确保片段与目标标题的自动生成形式完全一致（含大小写）。
方法 2：自定义标题锚点
在标题中显式定义锚点名称：### 自定义标题 {#my-custom-anchor}此时可用
[链接](#my-custom-anchor)直接引用，锚点名称需符合小写字母/数字/-/_格式[1][7]。方法 3：配置参数
在.markdownlint.json中添加：{ "MD051": { "ignore_case": true } }此配置将忽略片段名称的大小写差异[1][3]。
典型错误场景
## API v2.0 [查看文档](doc.md) [示例链接](#api-v20) <!-- 实际生成的片段是 api-v20查看文档 -->此时需通过自定义锚点修正：
## API v2.0 {#api-v20} [查看文档](doc.md)版本注意事项
v0.30+ 版本修复了标题内嵌链接导致的片段生成异常（如
# Heading [text](url)），建议保持工具版本更新[2][6]。该规则通过标准化文档内部导航结构，显著提升 Markdown 文档的可维护性和跨平台兼容性。
Citations:
- 1: https://github.com/DavidAnson/markdownlint/blob/main/doc/md051.md
- 2: DavidAnson/markdownlint#958
- 3: https://blog.csdn.net/weixin_44149294/article/details/126243402
- 4: https://www.newverse.wiki/senses/markdownlint/
- 5: https://blog.csdn.net/weixin_58052073/article/details/139469316
- 6: https://hertzbeat.apache.org/zh-cn/docs/community/code_style_and_quality_guide/
- 7: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md
- 8: https://gitee.com/openeuler/docs/blob/master/contribute/markdownlint%E6%A3%80%E6%9F%A5%E8%A7%84%E5%88%99.md
- 9: https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint
- 10: https://nextra-docs-omega.vercel.app/Markdown/MarkdownLint/md052
链接片段问题检查建议
文档中的属性表格内容已经完整，没有需要修改的部分。但请仔细核查整篇文档中的内部链接片段，确保所有
[文本](#fragment)链接指向实际存在且正确生成的标题锚点。根据 markdownlint 的 MD051 规则，请确认以下几点：
- 检查链接片段的大小写和特殊字符，确保与目标标题自动生成的锚点一致。
- 如果发现自动生成的锚点与预期不符，可以在标题后面显式定义锚点（例如
### 标题 {#custom-anchor}）以确保链接正确。- 或者，在
.markdownlint.json中配置ignore_case以忽略链接锚点的大小写差异，从而解决部分链接片段不匹配的问题。建议开发者针对整个文档执行一次 MD051 检查，确保所有内部链接都符合规则要求。
1 participant
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
middle-top，其含义等同于原middle，局中向上偏移。middle恢复其原始含义，局中不偏移。☑️ 请求合并前的自查清单
Summary by CodeRabbit
文档更新
新功能
重构