Skip to content

# 模块 UIComponents ​

渲染进程模块，游戏进程不能直接使用

包含了可以用在 UI 里面的可复用组件

- `Box`
- `BoxAnimate`
- `Column`
- `EnemyOne`
- `Scroll`
- `EnemyCritical`
- `EnemySpecial`
- `EnemyTarget`
- `Keyboard`

## Box ​

一个可以拖动的盒子，例如状态栏

- 参数（均为可选）
  - `dragable`: 盒子是否可以拖动
  - `resizeable`: 盒子是否可以自定义大小
  - `v-model:left`: 盒子的左上角横坐标
  - `v-model:top`: 盒子的左上角纵坐标
  - `v-model:width`: 盒子的宽度
  - `v-model:height`: 盒子的高度
- 插槽
  - `default`: 盒子中显示的内容

## BoxAnimate ​

一个显示图块动画的组件，例如怪物手册中的怪物图标

- 参数
  - `id`: 显示的图标 id
  - `noboarder`: 可选，是否没有边框与背景
  - `width`: 可选，图标的宽度，默认为 32
  - `height`: 可选，图标的高度，默认为 32

## Column ​

一个分为两栏进行显示的组件，例如设置快捷键中左右两侧中左侧显示按键分组，右侧显示组别信息

- 参数（均为可选）
  - `width`: 组件整体的宽度，占画面的百分比，一般不建议超过 90
  - `height`: 组件整体的高度，占画面的百分比，一般不建议超过 90
  - `left`: 左侧栏占比，范围 0-100
  - `right`: 右侧栏占比，范围 0-100
- 事件
  - `close`: 当点击左上角的返回后触发这个事件
- 插槽
  - `left`: 左侧栏显示的内容
  - `right`: 右侧栏显示的内容

## EnemyOne ​

显示单个怪物信息，就是怪物手册中的单个怪物信息

- 参数
  - `enemy`: 怪物信息，类型为 `ToShowEnemy`
  - `selected`: 这个怪物是否被选中
- 事件
  - `hover`: 当鼠标放到这个怪物身上或在怪物身上移动时触发
  - `select`: 当选中这个怪物时触发

## Scroll ​

滚动条组件，例如状态栏等

- 参数（均为可选）
  - `v-model:now`: 当前滚动条位置
  - `type`: 滚动条模式，`horizontal` 还是 `vertical`，默认为竖直，即 `vertical`
  - `v-model:drag`: 是否正在拖动
  - `width`: 滚动条的宽度
  - `v-model:update`: 取反以更新滚动条信息
  - `noScroll`: 不显示滚动条，例如状态栏
- 插槽
  - `default`: 滚动条内的显示内容

## Keyboard ​

虚拟键盘组件

- 参数
  - `keyboard`: 要显示哪个虚拟键盘