keyboard

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

组件结构

  1. <template>
  2. <view>
  3. <viewclass="tui-keyboard-mask" :class="[show?'tui-mask-show':'']"v-if="mask" @tap="handleClose"></view>
  4. <viewclass="tui-keyboard" :class="[action?'tui-keyboard-action':'',show?'tui-keyboard-show':'']">
  5. <slot></slot>
  6. <viewclass="tui-keyboard-grids">
  7. <!--{{(index==9 || index==10 || index==11)?'tui-grid-bottom':''}}-->
  8. <viewclass="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. <viewv-elseclass="tui-keyboard-item">
  12. <viewclass="tui-icon tui-keyboard-delete"></view>
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>

组件脚本

  1. <script>
  2. exportdefault{
  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. }elseif(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行,下载源码查看