自定义组件

日常使用以及兴趣使然开发的自定义组件

组件目录定位

这个目录用于记录自己封装的 Vue 组件，包括组件用途、使用方式、参数设计和实现思路。组件文档不只放代码，还应该说明组件解决什么问题、适合什么场景、有哪些边界。

组件设计流程

flowchart TD
    A[发现重复 UI 或交互] --> B[抽象组件职责]
    B --> C[设计 props 和 emits]
    C --> D[实现默认样式和插槽]
    D --> E[补充使用示例]
    E --> F[记录注意事项]

文档建议

部分	说明
使用场景	组件适合解决什么问题
Props	输入参数、类型、默认值
Emits	对外触发哪些事件
Slots	是否支持自定义内容
示例	最小可用代码
注意事项	层级、滚动、移动端、性能等边界

当前组件

1. 遮罩组件：用于页面遮罩、弹窗背景、加载蒙层等场景。

封装原则

1. 只在确实重复出现时抽组件，不为了抽象而抽象。
2. 组件只负责展示和基础交互，复杂业务逻辑留给页面或组合函数。
3. 命名要表达用途，例如 Mask、FileUpload，不要使用含糊的 CommonBox。
4. 对外 API 稳定后再扩展，避免频繁修改调用方。