基于vue3的虚拟键盘，能够中英文切换，拼音功能

实现效果

使用

主文件内容

<template>
  <div id="app">
    <div>
      <div>
        中文：<input
          style="width: 400px; height: 25px; font-size: 20px"
          type="text"
          v-model="value"
          keyboard="true"
        />
      </div>
      <div style="height: 400px"></div>
      <!-- {params: blurHide}：布尔值，ture为输入框失去焦点时自动隐藏键盘 -->
      <keyboard
        :transitionTime="'0.5s'"
        :maxQuantify="10"
        :showKeyboard="showKeyboard"
        @clickKey="clickKey"
        float
        :manyDict="manyDict"
        :singleDict="singleDict"
        @clickNumber="clickNumber"
        :blurHide="false"  
      ></keyboard>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import keyboard from "./components/keyboard/keyboardIndex.vue";

const value = ref("");
const showKeyboard = ref(false);

//点击键盘的值
const clickKey = (key) => {
  // console.log("key-->>",key);
}
//点击键盘时数字的值
const clickNumber = (key) => {
  // console.log("key-->>",key);
}
const manyDict = ref("dict/chowder.json")
const singleDict = ref("dict/baseDict.json")
</script>

<style>
.keyDown {
  background: #2c3e50;
}
body {
  margin: 0px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

要想让键盘自动绑定上，input或textarea必须设置keyboard="true"属性

源码链接：https://gitee.com/zihaoyu/virtual-keyboard

input属性

词库在本项目的src/dict目录下

引用词库示例

比如我有个词库在 src/dict目录下：
正确的引用<keyboard :singleDict="'dict/baseDict.json"'"></keyboard>

!!! 注意不要把多词汇词库传递给单词汇词库的属性
<br/>

词库介绍

组件属性

组件事件