import{_ as e,c as l,o,V as i}from"./chunks/framework.C8ZGvtil.js";const b=JSON.parse('{"title":"模块 UIComponents","description":"","frontmatter":{},"headers":[],"relativePath":"api/module/ui-components.md","filePath":"api/module/ui-components.md"}'),d={name:"api/module/ui-components.md"},c=i('<h1 id="模块-uicomponents" tabindex="-1">模块 UIComponents <a class="header-anchor" href="#模块-uicomponents" aria-label="Permalink to &quot;模块 UIComponents&quot;">​</a></h1><p>渲染进程模块，游戏进程不能直接使用</p><p>包含了可以用在 UI 里面的可复用组件</p><ul><li><a href="#box"><code>Box</code></a></li><li><a href="#boxanimate"><code>BoxAnimate</code></a></li><li><a href="#column"><code>Column</code></a></li><li><a href="#enemyone"><code>EnemyOne</code></a></li><li><a href="#scroll"><code>Scroll</code></a></li><li><code>EnemyCritical</code></li><li><code>EnemySpecial</code></li><li><code>EnemyTarget</code></li><li><a href="#keyboard"><code>Keyboard</code></a></li></ul><h2 id="box" tabindex="-1">Box <a class="header-anchor" href="#box" aria-label="Permalink to &quot;Box&quot;">​</a></h2><p>一个可以拖动的盒子，例如状态栏</p><ul><li>参数（均为可选） <ul><li><code>dragable</code>: 盒子是否可以拖动</li><li><code>resizeable</code>: 盒子是否可以自定义大小</li><li><code>v-model:left</code>: 盒子的左上角横坐标</li><li><code>v-model:top</code>: 盒子的左上角纵坐标</li><li><code>v-model:width</code>: 盒子的宽度</li><li><code>v-model:height</code>: 盒子的高度</li></ul></li><li>插槽 <ul><li><code>default</code>: 盒子中显示的内容</li></ul></li></ul><h2 id="boxanimate" tabindex="-1">BoxAnimate <a class="header-anchor" href="#boxanimate" aria-label="Permalink to &quot;BoxAnimate&quot;">​</a></h2><p>一个显示图块动画的组件，例如怪物手册中的怪物图标</p><ul><li>参数 <ul><li><code>id</code>: 显示的图标 id</li><li><code>noboarder</code>: 可选，是否没有边框与背景</li><li><code>width</code>: 可选，图标的宽度，默认为 32</li><li><code>height</code>: 可选，图标的高度，默认为 32</li></ul></li></ul><h2 id="column" tabindex="-1">Column <a class="header-anchor" href="#column" aria-label="Permalink to &quot;Column&quot;">​</a></h2><p>一个分为两栏进行显示的组件，例如设置快捷键中左右两侧中左侧显示按键分组，右侧显示组别信息</p><ul><li>参数（均为可选） <ul><li><code>width</code>: 组件整体的宽度，占画面的百分比，一般不建议超过 90</li><li><code>height</code>: 组件整体的高度，占画面的百分比，一般不建议超过 90</li><li><code>left</code>: 左侧栏占比，范围 0-100</li><li><code>right</code>: 右侧栏占比，范围 0-100</li></ul></li><li>事件 <ul><li><code>close</code>: 当点击左上角的返回后触发这个事件</li></ul></li><li>插槽 <ul><li><code>left</code>: 左侧栏显示的内容</li><li><code>right</code>: 右侧栏显示的内容</li></ul></li></ul><h2 id="enemyone" tabindex="-1">EnemyOne <a class="header-anchor" href="#enemyone" aria-label="Permalink to &quot;EnemyOne&quot;">​</a></h2><p>显示单个怪物信息，就是怪物手册中的单个怪物信息</p><ul><li>参数 <ul><li><code>enemy</code>: 怪物信息，类型为 <code>ToShowEnemy</code></li><li><code>selected</code>: 这个怪物是否被选中</li></ul></li><li>事件 <ul><li><code>hover</code>: 当鼠标放到这个怪物身上或在怪物身上移动时触发</li><li><code>select</code>: 当选中这个怪物时触发</li></ul></li></ul><h2 id="scroll" tabindex="-1">Scroll <a class="header-anchor" href="#scroll" aria-label="Permalink to &quot;Scroll&quot;">​</a></h2><p>滚动条组件，例如状态栏等</p><ul><li>参数（均为可选） <ul><li><code>v-model:now</code>: 当前滚动条位置</li><li><code>type</code>: 滚动条模式，<code>horizontal</code> 还是 <code>vertical</code>，默认为竖直，即 <code>vertical</code></li><li><code>v-model:drag</code>: 是否正在拖动</li><li><code>width</code>: 滚动条的宽度</li><li><code>v-model:update</code>: 取反以更新滚动条信息</li><li><code>noScroll</code>: 不显示滚动条，例如状态栏</li></ul></li><li>插槽 <ul><li><code>default</code>: 滚动条内的显示内容</li></ul></li></ul><h2 id="keyboard" tabindex="-1">Keyboard <a class="header-anchor" href="#keyboard" aria-label="Permalink to &quot;Keyboard&quot;">​</a></h2><p>虚拟键盘组件</p><ul><li>参数 <ul><li><code>keyboard</code>: 要显示哪个虚拟键盘</li></ul></li></ul>',22),a=[c];function t(n,r,u,h,m,s){return o(),l("div",null,a)}const _=e(d,[["render",t]]);export{b as __pageData,_ as default};
