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 //键盘按键索引值 }

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码