0%

vue网页简单拼音输入法

当我们在开发嵌入式应用的时候,我们可能不想让输入法的虚拟键盘出现。

因为虚拟键盘可以做到比较多的事情,而且也不容易控制。

例如 PC 上的虚拟键盘就可以执行 Alt F4,或者调出任务管理器,但是很多情况,我们是不允许用户这样操作的。

英文与数字字符的输入比较简单,直接贴个按钮便可以了,但却苦了咱们大汉字,常用字就有 3755 个(GB2312标准共收录6763个汉字,其中一级汉字3755个,二级汉字3008个,参考自:https://www.zhihu.com/question/20767273/answer/17986514 ),怎么滴,也不能在界面上贴3千个按钮吧,这不合适。

于是我开始寻找纯网页的输入法,发现有好几种类型,一种是类似控件的形式,侵入系统的方式实现,一种是在线输入法,而网页版离线输入法则基本上没有。

(都用网页了,为什么还要离线???emmmmmmm,因为实际环境可能能是离线的,或者是局域网方式,而网页(HTML5)可以更优雅的进行界面开发以及展示)。

翻遍了github,发现大多数不太适合,最终选定了一款,进行定制开发,封装了一层 Vue。方便自己使用。

Vue Input Keyboard

Vue Input Keyboard

参考借鉴 : https://github.com/sxei/pinyinjs

因为是决定复用切开源的组件,所以内部并没有使用第三方的 UI 直接手写代码,不过也没啥UI要弄得。

封装组件之后,只需要很简单的代码便可以引用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div class="pinyin">
<h1>拼音输入测试</h1>
<label for="test">测试</label><input id="test" v-model="text"/>
<PinYinKeyboard @on-delete="DeleteText" @on-push="PushText"></PinYinKeyboard>
</div>
</template>

<script>
// @ is an alias to /src

import PinYinKeyboard from "../components/PinYinKeyboard";

export default {
name: 'pinyin',
components: {PinYinKeyboard},
data() {
return {
text: ""
};
},
methods: {
log: console.log,
DeleteText() {
this.text = this.text.substr(0, this.text.length - 1);
},
PushText(key) {
this.text += (key);
}
}
}
</script>

组件源码 : https://github.com/kekxv/vue-pinyinKeyboard/tree/master/src/components

内部代码也比较简洁,感兴趣的可以自行查看。