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 | 外部样式覆盖 |
Ctrl 组合键（仅软键盘，不监听物理键盘）
| 组合 | 行为 |
|---|
| Ctrl+X / C / V | 剪切 / 复制 / 粘贴（原有，未改） |
| Ctrl+F | 全屏 / 退出全屏（对齐 $fn.As / $fn.AsFull；padteach* 跳过） |
| Ctrl+R | 刷新页面（对齐 $fn.As.localReload） |
| Ctrl+Space | 键盘复位到原点（原有） |
Ctrl / Shift 为粘滞开关：软键盘展开后即可按下，不要求焦点在文本框。顶栏用系统图标 represent/fullScreen、represent/refresh 直接全屏/刷新（padteach* 隐藏全屏按钮）。无 Ctrl 时 F/R 仍只插入字母。中文拼音只对 Ctrl+F/R 让路，不改 x/c/v。
文件结构
asai-vue-keyboard/
├── src/
│ ├── index.ts
│ ├── components/AsKeyBoardVue.vue
│ └── components/_use/useKeysConfig.ts
└── README.md
技术细节
- 遮罩
pointer-events: none，不阻挡下方交互
- 集成
v-popresizezoom 实现拖拽缩放
- 超出视口自动修正位置
- Backspace 在光标位置 0 时无操作（
backspaceEdit），避免误删末尾字符
- 顶栏 Tab 为胶囊选中态；拖拽握把与收起按钮分区，减少误触
- 按键按语义分色（Enter / Space / 修饰键）；触屏补
is-pressed 与短震动（无 vibrate 则跳过）
- 中文候选为胶囊条；展开面板带阴影与安全区，不改入键门闩
测试
npx tsx --test .youmengyu/test/unit/webclient/plugs/asai-vue-keyboard/*.test.mjs
node .youmengyu/test/asaitest.mjs