vue-keyboard-widget

Demo: 'https://www.liyu.fun/vue-keyboard-widget'

基于'vue-touch-keyboard'的封装,依赖

Vue 2 Vuex vue-touch-keyboard

于是为了方便开发,自己写了两个组件分别对inputvue-touch-keyboard进行了封装,并结合了vuex实现任意组件内通过input focus触发调用keyboard

Store

利用vuex存放

showKeyboard: 键盘显示状态 true-显示 false-隐藏 inputTarget: input的事件对象 MyInputWidget

包含了原生input和textarea,注册为全局组件方便调用,在focus时会触发事件,调用方法修改store中的数据

TouchKeyboard

注册在app根文件,通过监听store中的数据来控制键盘显示/隐藏,并且自己添加了pc/移动端的拖拽

需要注意的是,vue-touch-keyboard组件无法触发v-model,只能改变input内的值,需要手动绑定change事件,而且对于Elementel-input这样封装过的组件对象是无法识别的

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。