一个 基于 vue3 的 Web 端拼音输入法键盘

🚀 在你不方便使用系统自带的输入法键盘的时候，你可以试试这个拼音输入法键盘，工具如其名，只提供简单的拼音打字，英文（大小写）、数字。键盘还提供两个插槽供你自定义功能，分别是工具栏和工具栏内容，详细可以看下面的介绍。

安装

npm install pinyin-keyboard

使用

<template>
  <div>
    <input type="text" id="myInput1" />
    <input type="text" id="myInput2" />
    <PinyinKeyboard
      v-model:isShow="isShow"
      :inputId="inputId"
      :onHideBtn="onHide"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import { PinyinKeyboard } from "pinyin-keyboard";
  import "pinyin-keyboard/dist/style.css";

  const isShowKeyboard = ref(true);
  const inputId = ref("");

  onMounted(() => {
    document.getElementById("myInput1")?.addEventListener("focus", (e) => {
      inputId.value = "myInput1";
      isShowKeyboard.value = true;
      e.target?.blur();
    });

    document.getElementById("myInput2")?.addEventListener("focus", (e) => {
      inputId.value = "myInput2";
      isShowKeyboard.value = true;
      e.target?.blur();
    });
  });

  function onHide() {
    console.log("隐藏键盘按钮触发");
  }
</script>

Props

参数	说明	类型
isShow	是否显示键盘	boolean
inputId	需要弹出键盘的输入框的 id	string
isShowUtilsContent	是否显示键盘工具栏内容	boolean

Event

事件名称	说明	回调参数
onText	监听文字输出	fullText: string, singleText: string
onHideBtn	监听键盘隐藏	无
onkeyBtndown	监听键盘按钮按下	str: string (当前按下的按钮名称)
onEnter	监听右下角开始按钮点击	无

插槽

通过插槽，你可以在键盘上自定义一些功能

1.工具栏

<PinyinKeyboard
  v-model:isShow="isShowKeyboard"
  :inputId="inputId"
  :onText="onText"
  :on-hide-btn="onHide"
  :onkey-btndown="onkeyBtndown"
  :onEnter="onEnter"
>
  <template #kb-utils>
    <span>这里是工具栏</span>
  </template>
</PinyinKeyboard>

2.工具栏内容

<PinyinKeyboard
  v-model:isShow="isShowKeyboard"
  :inputId="inputId"
  :onText="onText"
  :on-hide-btn="onHide"
  :onkey-btndown="onkeyBtndown"
  :onEnter="onEnter"
  :isShowUtilsContent="true"
>
  <template #kb-utils>
    <span>这里是工具栏</span>
  </template>

  <template #utils-content>
    <span>这里是工具栏内容</span>
  </template>
</PinyinKeyboard>

注意：工具栏内容区域，覆盖在键盘上方，宽高占满整个键盘，显示与隐藏请自定义操作 isShowUtilsContent 属性

LICENSE

pinyin-keyboard is MIT licensed.