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

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

例如 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要弄得。

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

<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

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