u-number-keyboard.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <view class="u-keyboard" @touchmove.stop.prevent="() => {}">
  3. <view class="u-keyboard-grids">
  4. <view
  5. class="u-keyboard-grids-item"
  6. :class="[btnBgGray(index) ? 'u-bg-gray' : '', index <= 2 ? 'u-border-top' : '', index < 9 ? 'u-border-bottom' : '', (index + 1) % 3 != 0 ? 'u-border-right' : '']"
  7. :style="[itemStyle(index)]"
  8. v-for="(item, index) in numList"
  9. :key="index"
  10. :hover-class="hoverClass(index)"
  11. :hover-stay-time="100"
  12. @tap="keyboardClick(item)">
  13. <view class="u-keyboard-grids-btn">{{ item }}</view>
  14. </view>
  15. <view class="u-keyboard-grids-item u-bg-gray" hover-class="u-hover-class" :hover-stay-time="100" @touchstart.stop="backspaceClick"
  16. @touchend="clearTimer">
  17. <view class="u-keyboard-back u-keyboard-grids-btn">
  18. <u-icon name="backspace" :size="38" :bold="true"></u-icon>
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. props: {
  27. // 键盘的类型,number-数字键盘,card-身份证键盘
  28. mode: {
  29. type: String,
  30. default: 'number'
  31. },
  32. // 是否显示键盘的"."符号
  33. dotEnabled: {
  34. type: Boolean,
  35. default: true
  36. },
  37. // 是否打乱键盘按键的顺序
  38. random: {
  39. type: Boolean,
  40. default: false
  41. }
  42. },
  43. data() {
  44. return {
  45. backspace: 'backspace', // 退格键内容
  46. dot: '.', // 点
  47. timer: null, // 长按多次删除的事件监听
  48. cardX: 'X' // 身份证的X符号
  49. };
  50. },
  51. computed: {
  52. // 键盘需要显示的内容
  53. numList() {
  54. let tmp = [];
  55. if (!this.dotEnabled && this.mode == 'number') {
  56. if (!this.random) {
  57. return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  58. } else {
  59. return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
  60. }
  61. } else if (this.dotEnabled && this.mode == 'number') {
  62. if (!this.random) {
  63. return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
  64. } else {
  65. return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
  66. }
  67. } else if (this.mode == 'card') {
  68. if (!this.random) {
  69. return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
  70. } else {
  71. return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
  72. }
  73. }
  74. },
  75. // 按键的样式,在非乱序&&数字键盘&&不显示点按钮时,index为9时,按键占位两个空间
  76. itemStyle() {
  77. return index => {
  78. let style = {};
  79. if (this.mode == 'number' && !this.dotEnabled && index == 9) style.flex = '0 0 66.6666666666%';
  80. return style;
  81. };
  82. },
  83. // 是否让按键显示灰色,只在非乱序&&数字键盘&&且允许点按键的时候
  84. btnBgGray() {
  85. return index => {
  86. if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && this.dotEnabled))) return true;
  87. else return false;
  88. };
  89. },
  90. hoverClass() {
  91. return index => {
  92. if (!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class';
  93. else return 'u-keyboard-hover';
  94. }
  95. }
  96. },
  97. methods: {
  98. // 点击退格键
  99. backspaceClick() {
  100. this.$emit('backspace');
  101. clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
  102. this.timer = null;
  103. this.timer = setInterval(() => {
  104. this.$emit('backspace');
  105. }, 250);
  106. },
  107. clearTimer() {
  108. clearInterval(this.timer);
  109. this.timer = null;
  110. },
  111. // 获取键盘显示的内容
  112. keyboardClick(val) {
  113. // 允许键盘显示点模式和触发非点按键时,将内容转为数字类型
  114. if (this.dotEnabled && val != this.dot && val != this.cardX) val = Number(val);
  115. this.$emit('change', val);
  116. }
  117. }
  118. };
  119. </script>
  120. <style lang="scss" scoped>
  121. @import "../../libs/css/style.components.scss";
  122. .u-keyboard {
  123. position: relative;
  124. z-index: 1003;
  125. }
  126. .u-keyboard-grids {
  127. @include vue-flex;
  128. flex-wrap: wrap;
  129. }
  130. .u-keyboard-grids-item {
  131. flex: 0 0 33.3333333333%;
  132. text-align: center;
  133. font-size: 50rpx;
  134. color: #333;
  135. @include vue-flex;
  136. align-items: center;
  137. justify-content: center;
  138. height: 110rpx;
  139. font-weight: 500;
  140. }
  141. .u-bg-gray {
  142. background-color: $u-border-color;
  143. }
  144. .u-keyboard-back {
  145. font-size: 36rpx;
  146. }
  147. .u-keyboard-hover {
  148. background-color: #e7e6eb;
  149. }
  150. </style>