keyboard

keyboard 数字键盘，结合keyboard-input使用

组件结构

  1. <template>
  2.     <view>
  3.         <view class="tui-keyboard-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
  4.         <view class="tui-keyboard" :class="[action?'tui-keyboard-action':'',show?'tui-keyboard-show':'']">
  5.             <slot></slot>
  6.             <view class="tui-keyboard-grids">
  7.                 <!--{{(index==9 || index==10 || index==11)?'tui-grid-bottom':''}}-->
  8.                 <view class="tui-keyboard-grid" :class="[(index==9 || index==11)?'tui-bg-gray':'']" v-for="(item,index) in itemList"
  9.                  :key="index" hover-class="tui-keyboard-hover" :hover-stay-time="150" @tap="handleClick" :data-index="index">
  10.                     <view v-if="index<11" class="tui-keyboard-item" :class="[index==9?'tui-fontsize-32':'']">{{getKeyBoard(index,action)}}</view>
  11.                     <view v-else class="tui-keyboard-item">
  12.                         <view class="tui-icon tui-keyboard-delete"></view>
  13.                     </view>
  14.                 </view>
  15.             </view>
  16.         </view>
  17.     </view>
  18. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name:"tuiKeyboard",
  4.         props: {
  5.             //是否需要mask
  6.             mask: {
  7.                 type: Boolean,
  8.                 default: true
  9.             },
  10.             //控制键盘显示
  11.             show: {
  12.                 type: Boolean,
  13.                 default: false
  14.             },
  15.             //是否直接显示，不需要动画，一般使用在锁屏密码
  16.             action: {
  17.                 type: Boolean,
  18.                 default: true
  19.             }
  20.         },
  21.         data() {
  22.             return {
  23.                 itemList: [1,2,3,4,5,6,7,8,9,10,11,12]
  24.             };
  25.         },
  26.         methods: {
  27.             getKeyBoard: function(index, action) {
  28.                 var content = index + 1;
  29.                 if (index == 9) {
  30.                     content = action ? "取消" : "清除";
  31.                 } else if (index == 10) {
  32.                     content = 0;
  33.                 }
  34.                 return content;
  35.             },
  36.             //关闭
  37.             handleClose() {
  38.                 if (!this.show) {
  39.                     return;
  40.                 }
  41.                 this.$emit('close', {});
  42.             },
  43.             handleClick(e) {
  44.                 if (!this.show) {
  45.                     return;
  46.                 }
  47.                 const dataset = e.currentTarget.dataset;
  48.                 this.$emit('click', {
  49.                     index: Number(dataset.index)
  50.                 })
  51.             }
  52.         }
  53.     }
  54. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "mask" : 是否需要遮罩,类型:"Boolean",默认值:true
     "show" : 控制键盘显示,类型:"Boolean",默认值:false
     "action" :是否直接显示，不需要动画，一般使用在锁屏密码,类型:"Boolean",默认值:true
     "bold" : 是否加粗,类型:"Boolean",默认值:false
     "visible" : 是否显示，建议直接在页面上控制,类型:"Boolean",默认值:true
     "index" : 索引,类型:"Number",默认值:0

 methods:
   "getKeyBoard":获取按键文本
   "handleClose":关闭键盘
   "handleClick":键盘点击事件

示例

... 此处省略n行,下载源码查看