asai-vue-keyboard — 虚拟键盘组件

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-keyboard | src/index.ts | AsaiVueKeyboard → { AsKeyBoardVue } | Feature |

概述

asai-vue-keyboard 提供可拖拽、可缩放的虚拟软键盘，适用于触屏 HMI、机器人操作区与登录场景，通过 $global.keyboard 控制显示与布局。

集成方式

// monorepo — webclient/src/App.vue（首屏同步）
import AsaiVueKeyboard from './plugs/asai-vue-keyboard/src/index';
// npm
// import AsaiVueKeyboard from '@estun/asai-vue-keyboard';

useProvide({ plugs: { AsaiVueKeyboard } });

<AsKeyBoardVue :ujt="ujt" :opt="{ pos: { auto: true }, scale: 1 }" />

独立性约束

• 禁止 cross-import 其它 plugs/*。
• v-keyboard 指令（host-directives）通过 ujt 运行时关联本组件，不在插件内 import directives。

主要 API / 导出

| 导出 | 说明 | |------|------| | AsKeyBoardVue | 键盘容器组件 | | useKeysConfig | 按键映射初始化（内部） | | Types | KeyboardOpt, UjtContext, KeyPressParams |

性能说明

• 首屏同步注册；键盘 UI 为单组件，体积适中。
• 窗口尺寸仅在 onMounted 读取一次；布局变更需业务侧监听 resize（若需要）。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0",
    "@estun/asai-vue-host-directives": "^1.0.0"
  }
}

配置参数

opt

| 参数 | 说明 | |------|------| | pos.auto | 自动定位（底部居中） | | pos.x / pos.y | 手动偏移 | | scale | 缩放（配合 v-popresizezoom） |

$model.data.sys.keyboard

| 参数 | 说明 | |------|------| | cfg.size.* | 宽高中限 | | mapkeys / bottomkeys | 按键映射 |

$global.keyboard

| 属性 | 说明 | |------|------| | showkeyboard | 显示/隐藏 | | areastyle | 位置与尺寸 | | params.ot.style | 外部样式覆盖 |

文件结构

asai-vue-keyboard/
├── src/
│   ├── index.ts
│   ├── components/AsKeyBoardVue.vue
│   └── components/_use/useKeysConfig.ts
└── README.md

技术细节

• 遮罩 pointer-events: none，不阻挡下方交互
• 集成 v-popresizezoom 实现拖拽缩放
• 超出视口自动修正位置