[随笔]利用Vue实现一个虚拟键盘(含中英文切换)

说明:此技术使用场景有限,项目如果需要部署到触摸大屏端,为了解决文字输入问题,就需要屏幕虚拟键盘,这种技术Github上面也有, 基本上以英文输入为主, 找的几个中文原生的用起来也不方便, 索性改造一个的想法!

源码下载

源码结构

• chinese-pyntrad.js(字典)
• dictionary.js(字典)
• keyboard.js(相关方法事件,可根据自己需求修改)
• keyboard.vue(视图, 可以当作组件用)

用法

输入框

    <div class="search">
      <input name="inputArea" id="inputArea" :placeholder="placeholder" v-model="value"/>
      <input type="button" value="确定" @click="searchAseetesProd"/>
    </div>

引入组件后使用

	
	<div v-if="placeholder === '请输入身份证'">
          <keyboard :placeholder="placeholder" @getSearchValue="getSearchValue" />
        </div>

[效果]

BUG: 页面需要通过if判定,让页面同时只渲染一个, 多个会出现无法输入中文