mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-10-31 20:32:58 +08:00
66 lines
2.4 KiB
Markdown
66 lines
2.4 KiB
Markdown
# Tip 组件 API 文档
|
||
|
||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||
|
||
## 参数说明（Props）
|
||
|
||
| 参数名 | 类型 | 默认值 | 说明 |
|
||
| -------- | ------------------ | -------- | ---------------------------------------- |
|
||
| `loc` | `ElementLocator` | 必填 | 容器基础定位参数 [x,y,width,height] |
|
||
| `pad` | `[number, number]` | `[4,4]` | 图标与文字的边距配置 [水平边距,垂直边距] |
|
||
| `corner` | `number` | `4` | 圆角矩形的圆角半径 |
|
||
| `id` | `string` | 自动生成 | 提示框唯一标识（需全局唯一） |
|
||
|
||
## 暴露接口（Expose）
|
||
|
||
| 方法名 | 参数 | 返回值 | 说明 |
|
||
| --------- | ----------------------------------------------- | ------ | --------------------------------------------------- |
|
||
| `drawTip` | `text: string`<br>`icon?: AllIds \| AllNumbers` | `void` | 显示带图标的提示文本（图标支持字符串 ID 或数字 ID） |
|
||
|
||
## 使用示例
|
||
|
||
```tsx
|
||
import { defineComponent } from 'vue';
|
||
import { Tip } from './tip';
|
||
|
||
// 在游戏界面中定义提示组件
|
||
export const MyCom = defineComponent(() => {
|
||
return () => (
|
||
<container>
|
||
<Tip
|
||
loc={[32, 32, 280, 40]}
|
||
pad={[8, 4]}
|
||
corner={8}
|
||
id="global-tip"
|
||
></Tip>
|
||
</container>
|
||
);
|
||
});
|
||
|
||
// 在业务代码中调用提示，使用 TipStore 类
|
||
const tip = TipStore.get('global-tip');
|
||
tip?.drawTip('宝箱已解锁！', 'chest_icon');
|
||
```
|
||
|
||
## 特性说明
|
||
|
||
1. **自动布局**：
|
||
|
||
- 根据图标尺寸自动计算容器宽度
|
||
- 文字垂直居中显示
|
||
- 图标与文字间距自动适配
|
||
|
||
2. **动画效果**：
|
||
|
||
- 默认带有 500ms 双曲正弦缓动的淡入动画
|
||
- 3 秒无操作后自动淡出
|
||
- 支持通过`alpha`参数自定义过渡效果
|
||
|
||
## 注意事项
|
||
|
||
1. **全局单例**：建议通过 `TipStore` 进行全局管理，避免重复创建
|
||
2. **ID 唯一性**：未指定 `id` 时会自动生成格式为 `@default-tip-数字` 的标识
|
||
3. **自动隐藏**：调用 `drawTip` 后 3 秒自动隐藏，连续调用会重置计时
|
||
4. **性能优化**：使用 `lodash` 的 `debounce` 进行隐藏操作防抖
|
||
5. **动画配置**：可通过修改 `hyper('sin', 'in-out')` 参数调整动画曲线
|