uni-app 浮动键盘

作者:诗小柒

简介

使用与H5、小程序、App端的浮动键盘,键盘包括三种类型,纯数字键盘、汽车键盘、还有全键盘,所有键盘都可以自定义按键类型的禁用转态,值得体验,不懂如何使用的请直接github打包下载运行

开始使用

NPM

npm i tki-float-keyboard

GIT

git clone https://github.com/q310550690/tki-float-keyboard 

更新说明

  • 0.0.2 适配新版uni-app编译器(如果github上下载后使用新版HbuilderX1.7.1.20190320编译后无法启动请等待Dcloud更新即可)

1.引入组件

// template 使用
<tki-float-keyboard ref="keyb" :mode="keyMode" :type="keyType" :title="keyTitle" @del="keyDel" @val="keyVal" @show="keyShow" @hide="keyHide"></tki-float-keyboard>

// 普通引入组件
import tkiFloatKeyboard from '@/components/tki-float-keyboard/tki-float-keyboard.vue'
// npm 引入
import tkiFloatKeyboard from "tki-float-keyboard"

// 注册组件
components: {
    tkiFloatKeyboard
}

2.属性

title String

title 浮动键盘的标题 默认值为空

type [Number, String]

type 键盘可用区域,配合mode属性使用  默认值:0

mode = keyboard 时 type = 0 全部、 1 字母加数字、 2 符号、 3 字母、 4 数字、 5 字母加符号、6 数字加符号
mode = car 时 type = 0 全部、 1 字母加数字、 2 省、 3 字母加数字加特、 4 字母、 5 数字
mode = number 时 type = 0 全部、 1 禁用.

mode String

mode 键盘类型  keyboard 普通键盘,car 汽车键盘,number 数字键盘

3.方法

_keyShow() Function

this.$refs.keyb._keyShow() 显示键盘

_keyHide() Function

this.$refs.keyb._keyHide() 隐藏键盘

4.回调

val Function

@val="keyVal" 返回键盘输入内容
keyVal(v){
    console.log(v)
}

del Function

@del="keyDel" 键盘退格时回调
keyDel(){
    let d = this.val
    this.val = d.substring(0,d.length-1)
}

show Function

@show="keyShow" 键盘显示的回调 返回键盘节点信息
keyShow(h){
    console.log(h)
}

hide Function

@hide="keyHide" 键盘隐藏时触发
keyHide(){
    // 做点什么
}

5.问题

暂无问题

6.感谢

uni-app

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问