feat: ✨ Fab 悬浮按钮组件支持自定义触发器和控制能否展开

[Moonofweisheng]

✅ Closes: #512

🤔 这个 PR 的性质是？(至少选择一个)

• 日常 bug 修复
• 新特性提交
• 站点、文档改进
• 演示代码改进
• 组件样式/交互改进
• TypeScript 定义更新
• CI/CD 改进
• 包体积优化
• 性能优化
• 功能增强
• 国际化改进
• 代码重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他改动（是关于什么的改动？）

🔗 相关 Issue

#512

💡 需求背景和解决方案

提供expandable属性用于控制点击触发器是否展开。
提供trigger插槽用于自定义触发器。

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

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

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

Summary by CodeRabbit

• 新功能

  • 引入自定义触发器功能，允许开发者使用自定义按钮触发 FAB 操作。
  • 添加可扩展属性，控制 FAB 操作菜单的展开行为。

• 文档更新

  • 更新 FAB 组件文档，增加自定义触发器和可扩展属性的说明，提供更清晰的 API 参考。

• 样式调整

  • 对 FAB 组件的样式进行小幅调整，确保布局一致性。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wot-design-uni	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 19, 2024 3:28pm

[coderabbitai]

Walkthrough

此次更改主要增强了浮动操作按钮（FAB）组件的功能和可用性。新增的“自定义触发器”部分允许开发者使用 trigger 插槽实现自定义按钮操作。此外，expandable 属性的行为得到了澄清，控制操作菜单的展开和折叠。文档和组件代码进行了相应更新，以支持这些新功能。

Changes

文件路径	更改摘要
docs/component/fab.md	增加“自定义触发器”部分，更新 expandable 属性的说明，添加属性表中的 expandable。
src/pages/fab/Index.vue	添加切换开关以使用自定义触发器，更新 FAB 样式，增加自定义点击处理函数。
src/uni_modules/wot-design-uni/components/wd-fab/types.ts	在 fabProps 中添加 expandable 属性，默认值为 true，并附加中文说明。
src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue	支持自定义触发器插槽，调整组件行为以发出点击事件，优化内部状态管理和渲染效率。

Possibly related PRs

• feat: ✨ Input 组件新增clear-triger属性 #476: 此 PR 涉及 wd-input 组件中的 clear-trigger 属性，与主 PR 中的 expandable 属性相关，均增强了用户交互和组件行为控制。
• refactor: ♻️ 重构Input、Textarea组件的事件执行时序 #493: 此 PR 也关注 clear-trigger 属性，旨在改善输入组件的功能，与主 PR 中 FAB 组件的可用性增强相关联。

🐇 在草地上跳跃，FAB新功能闪耀，
自定义触发器，互动乐趣无穷，
展开与折叠，控制随心所欲，
文档更新，开发者欢呼，
兔子祝贺，代码更美好！ 🐇

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a51204b and f338c94.

Files selected for processing (4)

• docs/component/fab.md (1 hunks)
• src/pages/fab/Index.vue (3 hunks)
• src/uni_modules/wot-design-uni/components/wd-fab/types.ts (1 hunks)
• src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue (8 hunks)

Additional comments not posted (23)

src/uni_modules/wot-design-uni/components/wd-fab/types.ts (1)

50-54: 代码看起来不错！

新增的 expandable 属性使用 makeBooleanProp 工具函数正确定义，默认值为 true。这个属性允许开发者控制悬浮按钮菜单的可展开行为，增强了组件的功能。同时，代码中的注释清晰地说明了该属性的作用。

此外，expandable 属性的默认值设置为 true，确保了向后兼容性，不会改变组件的现有逻辑。

总的来说，这个改动很好地增强了组件的功能，代码实现也很优雅。

src/pages/fab/Index.vue (5)

46-51: 看起来不错！

这段代码添加了一个新的 <demo-block> 部分，用于切换是否使用自定义触发器插槽。代码结构正确，与其他部分保持一致。

---

Line range hint 52-75: 代码看起来很好！

这段代码根据 useTriggerSlot 的值有条件地渲染默认的 FAB 组件。组件绑定了各种 prop 来控制其行为和外观，并为点击事件设置了处理程序以触发相应的 toast 消息。代码结构正确，没有明显的问题。

---

76-81: 自定义触发器的实现看起来不错！

这段代码根据 useTriggerSlot 的值有条件地渲染带有自定义触发器插槽的 FAB 组件。自定义触发器包含一个带有点击处理程序、图标和类型的 <wd-button> 组件。expandable prop 设置为 false，可能是为了防止在点击自定义触发器时 FAB 展开。代码结构正确，没有明显的问题。

---

94-95: 新增的响应式变量没有问题！

这段代码使用 ref 函数添加了一个新的响应式变量 useTriggerSlot，初始值为 false。这个变量可能用于控制是否为 FAB 组件使用自定义触发器插槽，与模板代码中的用法一致。代码结构正确，没有明显的问题。

---

98-101: 自定义触发器的点击处理程序实现正确！

这段代码添加了一个新的函数 handleCustomClick，用于在点击自定义触发器按钮时显示一个 toast 消息。函数使用了 useToast 组合式函数中的 showToast 函数来显示消息。代码结构正确，与模板代码中的用法一致，没有明显的问题。

src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue (13)

11-11: 很好的改进！

添加 trigger 插槽为用户提供了自定义触发器的灵活性。如果提供了插槽，默认按钮将不会被渲染，从而允许完全自定义触发器的外观和行为。这个改动与 PR 的目标相符合，增强了组件的可定制性。

---

12-12: 逻辑正确

使用 v-else 指令确保只有在没有提供 trigger 插槽时才渲染默认按钮。这个改动很好地补充了 trigger 插槽的添加，维护了组件在不同使用场景下的一致性。

---

17-17: 新功能实现得很好

添加 expandable 属性允许用户控制 FAB 是否可展开。这个改动与 PR 的目标相符合，为用户提供了控制 FAB 可展开状态的能力。这是一个很好的新功能，增强了组件的灵活性。

---

53-53: 性能优化

引入 useRaf 组合式函数是一个很好的选择。使用 requestAnimationFrame 可以优化某些操作的性能，特别是那些需要频繁更新或者与浏览器重绘同步的操作。这个改动有助于提升组件的性能表现。

---

56-56: 事件粒度改进

除了现有的 update:active 事件外，还发送了一个新的 click 事件。这允许用户单独处理 FAB 的点击事件，而不仅仅是 active 状态的改变。这个改动提高了事件的粒度，为用户提供了更多的控制能力。很好的改进！

---

98-98: 代码可读性提升

将 fabSize 从 ref 改为 reactive 对象是一个很好的改进。这样可以让 fabSize 同时响应式地持有 width 和 height 属性。这个改动简化了 FAB 尺寸的处理逻辑，提高了代码的可读性。

---

110-110: 尺寸一致性改进

根据触发器元素的宽度设置 fabSize.width，确保 FAB 的尺寸与触发器的尺寸相匹配。这个改动提高了 FAB 和触发器之间的一致性，使它们看起来更加协调。很好的改进！

---

111-111: 尺寸一致性改进

与设置 fabSize.width 类似，根据触发器元素的高度设置 fabSize.height，确保 FAB 的尺寸与触发器的尺寸相匹配。这个改动进一步提高了 FAB 和触发器之间的一致性，使它们在视觉上更加协调。很好的改进！

---

121-121: 位置计算逻辑改进

根据屏幕宽度和 FAB 宽度计算 FAB 的最大左侧位置，确保 FAB 始终保持在屏幕范围内。这个改动优化了 FAB 的定位逻辑，防止其超出屏幕边界。很好的改进，提高了组件的鲁棒性。

---

122-122: 位置计算逻辑改进

与计算最大左侧位置类似，根据屏幕高度和 FAB 高度计算 FAB 的最大顶部位置，确保 FAB 始终保持在屏幕范围内。这个改动进一步优化了 FAB 的定位逻辑，防止其超出屏幕边界。很好的改进，提高了组件的鲁棒性。

---

177-177: 吸附逻辑改进

根据 FAB 的左侧位置和宽度计算其中心的 x 坐标，用于确定将 FAB 吸附到屏幕的哪一侧。这个改动优化了 FAB 的吸附逻辑，使代码更加清晰易读。很好的改进！

---

207-212: 性能优化

使用 useRaf 组合式函数异步初始化 FAB 位置，确保初始化在下一个动画帧中发生。这个改动有助于提升性能，避免布局抖动。将初始化逻辑放入 requestAnimationFrame 回调中是一个很好的优化策略。

---

227-230: 行为逻辑改进

在发送 click 事件之前检查 expandable 属性。如果 FAB 不可展开，则发送 click 事件并提前返回。这个改动确保只有在 FAB 不可展开时才发送 click 事件，为可展开和不可展开的行为提供了清晰的区分。很好的改进，使组件的行为更加明确和可预测。

docs/component/fab.md (4)

45-52: 代码看起来不错！

自定义按钮的样式设置合理，使用 :deep() 有效地覆盖了默认样式。固定的尺寸和圆角的设置使按钮具有一致的外观。

---

54-57: 样式设置得很好！

自定义单选按钮的样式覆盖合理。通过设置相等的 height 和 line-height，有效地控制了单选按钮的高度，并使其内容垂直居中。

---

82-99: 新增的自定义触发器功能非常实用！

引入 trigger 插槽和 expandable 属性，极大地提升了 Fab 组件的灵活性。用户现在可以根据自己的需求自定义触发按钮，并控制动作菜单的展开行为。

示例代码清晰地演示了如何使用 trigger 插槽并处理点击事件，对用户而言非常友好。

这些改动与 PR 的目标完全一致，允许自定义触发器并控制菜单的展开。非常棒的功能增强！

---

103-117: 文档更新很全面！

新增的 expandable 属性为控制动作菜单的展开行为提供了便利。将其设置为 false 可以防止菜单展开，转而触发点击事件，这提供了更多的控制灵活性。

属性表中对 expandable 的描述很清晰，包括了类型、默认值和详细的说明。用户可以轻松地理解和使用该属性。

这一新增与 PR 的目标完全吻合，允许控制菜单的展开行为。非常好的文档更新！

---

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?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  -- I pushed a fix in commit <commit_id>, please review it.
  -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  -- @coderabbitai generate unit testing code for this file.
  -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify]

✅ Deploy Preview for wot-design-uni ready!

Name	Link
🔨 Latest commit	f338c94
🔍 Latest deploy log	https://app.netlify.com/sites/wot-design-uni/deploys/66ec43113fed8a00086c2a97
😎 Deploy Preview	https://deploy-preview-612--wot-design-uni.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.