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行,下载源码查看

icon list-view