更新记录

1.1.6(2022-12-12) 下载此版本

  • 修复 H5和小程序下样式缺失问题

1.1.5(2022-09-20) 下载此版本

  • 调整 Vue3支持
  • 调整 liujto-keyboard-input组件,显示”百“的单位
  • 新增 liujto-keyboard-input 新增H5和小程序等光标闪烁功能

1.1.3(2022-07-12) 下载此版本

  • 修复 liujto-keyboard-number组件,type=password时无法在第一位输入0的bug
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.0 app-vue app-nvue × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

组件介绍

组件 介绍
liujto-keyboard-number 嵌入数字键盘,支持整数,小数,身份证,负数输入
liujto-keyboard-popup 弹出的数字键盘,依赖于插件uni-popup
liujto-keyboard-input 嵌入数字键盘,支持整数,小数,身份证,负数输入
liujto-keyboard-price 一个简单的复合型金额输入弹窗

liujto-keyboard-price为一个简单的复合使用的案例,其他需求可以参照这个来开发,如租金+天数+押金的填写等,下面的使用,都按照该组件为案例。

一、引入组件

    import keyboardPrice from '@/components/liujto-rely-input/liujto-keyboard-price.vue'
    export default {
        components:{
            keyboardPrice
        },
        ...
    }

二、使用

<keyboard-price type="digit" v-model="value">

三、liujto-keyboard-number 组件

嵌入型的数字键盘,支持证书,小数,身份证,负数输入模式,该组件无弹窗,是直接放到界面上使用的,由于App限制,所有回退按钮和关闭按钮都用文字替代,如果需要使用图标的话,提供了关闭按钮和回退按钮的图标样式,推荐使用iconfont的图标。

3.1 属性

属性名 类型 默认值 说明
value String/Number 空字符串 值,支持v-model
theme String block 键盘样式,支持block和button
type String number 模式,number 整数,digit 小数,idcard 身份证,password 密码,money 金额输入
confirmText String 完成 完成按钮的文案
backgroundColor String #ffffff 键盘的背景颜色,只有button才会有效果
point String/Number 2 保留小数点的位数
btnStyle Object 见下方 数字按钮的样式
confirmStyle Object 见下方 完成按钮的样式
max Number/String 9999999999 可输入最大值
isClose Boolean true 是否出现关闭按钮
isCut Boolean false 是否出现负号
closeIcon Object {class:'',icon:'关闭'} 关闭按钮的图标样式
backIcon Object {class:'',icon:'回退'} 回退按钮的图标样式

3.2 btnStyle 数字按钮的样式

属性名 类型 默认值 说明
backgroundColor String #ffffff 按钮背景色
color String rgba(0,0,0,.85) 按钮文字颜色
fontWeight String 400 粗体大小

3.3 confirmStyle 完成按钮的样式

属性名 类型 默认值 说明
backgroundColor String #ffffff 按钮背景色
color String rgba(0,0,0,.85) 按钮文字颜色

3.4 事件

事件名 返回参数 说明
onClose 当前输入内容 键盘关闭时
onDone 当前输入内容 点击完成按钮时
input 当前输入内容 input事件

3.5 插槽

名称 位置
默认 数字键盘上方

四、liujto-keyboard-popup 组件

可以弹出的数字键盘,参数和liujto-keyboard-number一致,这里只列出不同的参数,注意,使用该组件依赖uni-popup插件,自行安装。

4.1 属性

属性名 类型 默认值 说明
isMaskClick Boolean true 点击弹窗是否关闭
maskBackgroundColor String rgba(0,0,0,.1) mask背景颜色

4.2 事件

事件名 返回参数 说明
onClose 当前输入内容 键盘关闭时事件
onDone 当前输入内容 点击完成按钮时事件
input 当前输入内容 input事件
onChange 状态 打开关闭弹窗时

4.3 方法

方法名 参数 说明
open 打开弹窗
close 关闭弹窗

4.4 插槽

名称 位置
默认 数字键盘上方

五、liujto-keyboard-input 组件

主要是为了搭配数字键盘,为了实现点击input时,实现自带键盘不弹出的功能,从而模拟了一个类似于input的假键盘,支持格式化金额,单位等的显示

5.1 属性

属性名 类型 默认值 说明
value String/Number 空字符串
options Object 见下方5.2 额外参数
focus Boolean true 设置焦点,会有光标效果

5.2 options 属性

属性名 类型 默认值 说明
label String 空字符串 输入框前的文字
type String number 暂时只支持number
height Number 70 输入框高度
valueClass String 输入框的额外样式
beforeUnit String 在数字前的符号,如:¥
afterUnit String 在数字后的符号,如:/天
priceUnit String 格式化金额类型,money为大写人民币,number为统计数字单位
focusColor String #FD7231 光标颜色
placeholder String 无输入时占位符

5.3 事件

事件名 返回参数 说明
click 当前实例 点击输入框时的处理,可以设置focus来达到切换多个输入框激活的效果

六、liujto-keyboard-price 组件

使用以上3个组件组合实现的一个复合型的金额输入弹窗,能够实现简单的金额或其他数字的输入,如需其他功能可参考该组件来进行实现。参数大部分和上述一致,如有不同的地方会单独写出。

6.1 属性

属性名 类型 默认值 说明
value String/Number 空字符串 值,支持v-model
inputOptions Object 同5.2属性 输入框的options属性
title String 弹窗标题
borderRadius Number 30 弹窗原角数

6.2 事件

事件名 返回参数 说明
onClose 当前输入内容 键盘关闭时事件
onDone 当前输入内容 点击完成按钮时事件
input 当前输入内容 input事件
onChange 状态 打开关闭弹窗时

6.3 方法

方法名 参数 说明
open 打开弹窗
close 关闭弹窗

七.写在最后

1.只注重测试了android和ios,nvue模式两个平台,小程序,vueApp,h5只是稍微测试了一下,其他平台自行测试;
2.精力有限,如有问题看下源码基本都能自行修改,实在不会请留言或者vx black724206115备注好,我会定期查看,谢谢;
3.前端小白,大部分插件都是为了方便才上传,如有不对或者有更好的优化请留言,请嘴下留情,轻喷,谢谢。

隐私、权限声明

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

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

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

许可协议

MIT协议

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