# 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示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 9/30/2022, 11:27:40 PM