vue网页简单拼音输入法

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

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

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

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

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

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

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

参考借鉴 ： 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

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