@composy/keyboard-vue

@composy/keyboard-vue

@composy/keyboard-vue 是 @composy/keyboard-core 的 Vue 3 适配层，导出虚拟键盘组件、组合式函数、指令和插件，并重新导出 Core 的布局、类型、主题与工具 API。

安装

pnpm add @composy/keyboard-vue vue

组件用法

<script setup lang="ts">
import { KeyboardPopup, LicensePlateKeyboard, VirtualKeyboard } from '@composy/keyboard-vue'
import { ref } from 'vue'

const value = ref('')
const plate = ref('京A')
</script>

<template>
  <VirtualKeyboard v-model="value" type="qwerty" />
  <LicensePlateKeyboard v-model="plate" />
  <KeyboardPopup v-model="value" type="number" />
</template>

如需显式引入组件样式，可使用 @composy/keyboard-vue/index.css。

插件、指令与组合式函数

import { KeyboardVuePlugin, useKeyboard } from '@composy/keyboard-vue'
import { createApp } from 'vue'

const app = createApp(App)
app.use(KeyboardVuePlugin, { prefix: 'L' })

const keyboard = useKeyboard({ type: 'number' })
keyboard.show()

插件全局注册 LKeyboard、LKeyboardPopup、LLicensePlateKeyboard 和 v-keyboard。也可以按需使用 vKeyboard、useKeyboardPopup，或直接从适配包导入 Core API。

公开入口

• 组件：VirtualKeyboard、KeyboardKey、KeyboardPopup、LicensePlateKeyboard
• Composables：useKeyboard、useKeyboardPopup
• 插件：KeyboardVuePlugin（兼容别名 KeyboardPlugin）
• 指令：vKeyboard
• Core：布局注册、键盘管理器、DOM 渲染器、主题、格式化函数、随机键盘工具及对应类型

构建产物

包使用 @composy/builder（rolldown）。发布目录为 dist/（UMD 与 CSS）、es/（ESM 和声明）、esm/（独立 ESM 输出）及 lib/（CJS 和声明）；包的 exports、style、main、module 与 types 指向这些实际产物。

pnpm --dir libraries/keyboard run build
pnpm --dir libraries/keyboard/packages/vue run type-check
pnpm --dir libraries/keyboard/packages/vue run type-check:cjs

License

MIT