HumanBreak/docs/api/module/ui-components.md

模块 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: 要显示哪个虚拟键盘