# tui-keyboard 数字键盘 开源组件
介绍
数字键盘,例子包括6位数和4位数输入,长度动态传入,结合组件 tui-keyboard-input
使用。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiKeyboard from "@/components/thorui/tui-keyboard/tui-keyboard.vue"
export default {
components:{
tuiKeyboard
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-keyboard": "/components/thorui/tui-keyboard/tui-keyboard"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础用法
通过 show
属性控制键盘显示隐藏。注:关闭需要监听close事件来设置show为false
<!--uni-app-->
<tui-keyboard :show="show" @close="closeKeyboard" @click="keyboardClick">
<view class="tui-digital-box">
<view class="tui-keyboard-tips">请输入密码</view>
<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
</view>
</tui-keyboard>
// data 数据 及 方法
export default {
data() {
return {
show: false,
numberArr: [],
//数组长度表示显示输入框的个数
pwdArr: ["", "", "", "", "", ""],
temp: ["", "", "", "", "", ""],
radius: false
}
},
methods: {
//调用此方法打开数字键盘
showKeyboard(index) {
this.show = true
},
closeKeyboard: function() {
this.show = false;
this.numberArr = [];
this.pwdArr = this.temp
},
getPwd: function() {
//判断并取出密码
if (this.numberArr.length === this.pwdArr.length) {
uni.showLoading({
title: '模拟提交...',
mask: true
})
setTimeout(() => {
let pwd = this.numberArr.join('')
this.closeKeyboard();
this.tui.toast("您输入的密码为:" + pwd);
// #ifdef MP-ALIPAY || MP-BAIDU
setTimeout(()=>{
uni.hideLoading()
},200)
// #endif
}, 800);
}
},
keyboardClick: function(e) {
let numberArr = this.numberArr;
let pwdArr = this.pwdArr;
let index = e.index;
if (numberArr.length === pwdArr.length || index == undefined) {
return;
}
if (index == 9) { //取消键
this.closeKeyboard();
return;
} else if (index == 11) {
//退格键
let len = numberArr.length;
if (len) {
pwdArr.splice(len - 1, 1, "");
} else {
pwdArr = this.temp;
}
numberArr.pop()
} else if (index == 10) {
numberArr.push(0);
pwdArr.splice(numberArr.length - 1, 1, "●");
} else {
numberArr.push(index + 1);
pwdArr.splice(numberArr.length - 1, 1, "●");
}
this.numberArr = numberArr;
this.pwdArr = pwdArr;
this.getPwd();
}
}
}
/* 样式 */
.tui-keyboard-tips {
width: 100%;
height: 120rpx;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
background: #fff;
position: relative;
color: #333;
border: 0;
}
.tui-digital-box {
background: #fff;
padding-bottom: 50rpx;
border: 0;
}
<!--小程序-->
<tui-keyboard show="{{show}}" bindclose="closeKeyboard" bindclick="keyboardClick">
<view class="tui-digital-box">
<view class="tui-keyboard-tips">请输入密码</view>
<tui-keyboard-input inputvalue="{{pwdArr}}"></tui-keyboard-input>
</view>
</tui-keyboard>
// data 数据 及 方法
import tui from '../../../common/httpRequest'
Page({
data: {
show: false,
numberArr: [],
pwdArr: ["", "", "", "", "", ""],
temp: ["", "", "", "", "", ""],
radius: false
},
//调用此方法打开数字键盘
showKeyboard(e) {
this.setData({
show: true
})
},
closeKeyboard: function() {
this.setData({
show:false,
numberArr:[],
pwdArr: this.data.temp
})
},
getPwd: function() {
//判断并取出密码
if (this.data.numberArr.length === this.data.pwdArr.length) {
wx.showLoading({
title: '模拟提交...',
mask: true
})
setTimeout(() => {
let pwd = this.data.numberArr.join('')
this.closeKeyboard();
tui.toast("您输入的密码为:" + pwd);
}, 800);
}
},
keyboardClick: function(e) {
let numberArr = this.data.numberArr;
let pwdArr = this.data.pwdArr;
let index = e.detail.index;
if (numberArr.length === pwdArr.length || index == undefined) {
return;
}
if (index == 9) { //取消键
this.closeKeyboard();
return;
} else if (index == 11) {
//退格键
let len = numberArr.length;
if (len) {
pwdArr.splice(len - 1, 1, "");
} else {
pwdArr = this.data.temp;
}
numberArr.pop()
} else if (index == 10) {
numberArr.push(0);
pwdArr.splice(numberArr.length - 1, 1, "●");
} else {
numberArr.push(index + 1);
pwdArr.splice(numberArr.length - 1, 1, "●");
}
this.setData({
numberArr: numberArr,
pwdArr: pwdArr
},()=>{
this.getPwd();
})
}
})
/* 样式 */
.tui-keyboard-tips {
width: 100%;
height: 120rpx;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
background: #fff;
position: relative;
color: #333;
border: 0;
}
.tui-digital-box {
background: #fff;
padding-bottom: 50rpx;
border: 0;
}
// Make sure to add code blocks to your code group
# Slots
插槽名称 | 说明 |
---|---|
default | 键盘上方展示的内容 |
# Props
属性名 | 类型 | 说明 | 默认值 |
---|---|---|---|
mask | Boolean | 是否需要mask | true |
show | Boolean | 控制键盘显示隐藏 | false |
action | Boolean | 是否直接显示,不需要动画,一般使用在锁屏密码 | true |
radius | Boolean | 是否带圆角 | false |
# Events
注:uni-app端绑定事件使用@前缀,如@close;微信小程序原生使用bind前缀,如bindclose
事件名 | 说明 | 回调参数 |
---|---|---|
close | 关闭键盘时触发 | {} |
click | 键盘点击事件 | { index:Number //键盘按键索引值 } |
# 预览
# 特别说明
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |