You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

198 lines
6.2 KiB

5 months ago
  1. <template>
  2. <view
  3. class="u-keyboard"
  4. @touchmove.stop.prevent="noop"
  5. >
  6. <view
  7. class="u-keyboard__button-wrapper"
  8. v-for="(item, index) in numList"
  9. :key="index"
  10. >
  11. <view
  12. class="u-keyboard__button-wrapper__button"
  13. :style="[itemStyle(index)]"
  14. @tap="keyboardClick(item)"
  15. hover-class="u-hover-class"
  16. :hover-stay-time="200"
  17. >
  18. <text class="u-keyboard__button-wrapper__button__text">{{ item }}</text>
  19. </view>
  20. </view>
  21. <view
  22. class="u-keyboard__button-wrapper"
  23. >
  24. <view
  25. class="u-keyboard__button-wrapper__button u-keyboard__button-wrapper__button--gray"
  26. hover-class="u-hover-class"
  27. :hover-stay-time="200"
  28. @touchstart.stop="backspaceClick"
  29. @touchend="clearTimer"
  30. >
  31. <u-icon
  32. name="backspace"
  33. color="#303133"
  34. size="28"
  35. ></u-icon>
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import { props } from './props';
  42. import { mpMixin } from '../../libs/mixin/mpMixin';
  43. import { mixin } from '../../libs/mixin/mixin';
  44. import { randomArray } from '../../libs/function/index';
  45. /**
  46. * keyboard 键盘组件
  47. * @description
  48. * @tutorial
  49. * @property {String} mode 键盘的类型number-数字键盘card-身份证键盘
  50. * @property {Boolean} dotDisabled 是否显示键盘的"."符号
  51. * @property {Boolean} random 是否打乱键盘按键的顺序
  52. * @event {Function} change 点击键盘触发
  53. * @event {Function} backspace 点击退格键触发
  54. * @example
  55. */
  56. export default {
  57. mixins: [mpMixin, mixin, props],
  58. data() {
  59. return {
  60. backspace: 'backspace', // 退格键内容
  61. dot: '.', // 点
  62. timer: null, // 长按多次删除的事件监听
  63. cardX: 'X' // 身份证的X符号
  64. };
  65. },
  66. computed: {
  67. // 键盘需要显示的内容
  68. numList() {
  69. let tmp = [];
  70. if (this.dotDisabled && this.mode == 'number') {
  71. if (!this.random) {
  72. return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  73. } else {
  74. return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
  75. }
  76. } else if (!this.dotDisabled && this.mode == 'number') {
  77. if (!this.random) {
  78. return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
  79. } else {
  80. return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
  81. }
  82. } else if (this.mode == 'card') {
  83. if (!this.random) {
  84. return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
  85. } else {
  86. return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
  87. }
  88. }
  89. },
  90. // 按键的样式,在非乱序&&数字键盘&&不显示点按钮时,index为9时,按键占位两个空间
  91. itemStyle() {
  92. return index => {
  93. let style = {};
  94. if (this.mode == 'number' && this.dotDisabled && index == 9) style.width = '464rpx';
  95. return style;
  96. };
  97. },
  98. // 是否让按键显示灰色,只在非乱序&&数字键盘&&且允许点按键的时候
  99. btnBgGray() {
  100. return index => {
  101. if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this
  102. .dotDisabled))) return true;
  103. else return false;
  104. };
  105. },
  106. },
  107. created() {
  108. },
  109. emits: ["backspace", "change"],
  110. methods: {
  111. // 点击退格键
  112. backspaceClick() {
  113. this.$emit('backspace');
  114. clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
  115. this.timer = null;
  116. this.timer = setInterval(() => {
  117. this.$emit('backspace');
  118. }, 250);
  119. },
  120. clearTimer() {
  121. clearInterval(this.timer);
  122. this.timer = null;
  123. },
  124. // 获取键盘显示的内容
  125. keyboardClick(val) {
  126. // 允许键盘显示点模式和触发非点按键时,将内容转为数字类型
  127. if (!this.dotDisabled && val != this.dot && val != this.cardX) val = Number(val);
  128. this.$emit('change', val);
  129. }
  130. }
  131. };
  132. </script>
  133. <style lang="scss" scoped>
  134. @import "../../libs/css/components.scss";
  135. $u-number-keyboard-background-color:rgb(224, 228, 230) !default;
  136. $u-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
  137. $u-number-keyboard-button-width:222rpx !default;
  138. $u-number-keyboard-button-margin:4px 6rpx !default;
  139. $u-number-keyboard-button-border-top-left-radius:4px !default;
  140. $u-number-keyboard-button-border-top-right-radius:4px !default;
  141. $u-number-keyboard-button-border-bottom-left-radius:4px !default;
  142. $u-number-keyboard-button-border-bottom-right-radius:4px !default;
  143. $u-number-keyboard-button-height: 90rpx!default;
  144. $u-number-keyboard-button-background-color:#FFFFFF !default;
  145. $u-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
  146. $u-number-keyboard-text-font-size:20px !default;
  147. $u-number-keyboard-text-font-weight:500 !default;
  148. $u-number-keyboard-text-color:$u-main-color !default;
  149. $u-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
  150. $u-number-keyboard-u-hover-class-background-color: #BBBCC6 !default;
  151. .u-keyboard {
  152. @include flex;
  153. flex-direction: row;
  154. justify-content: space-around;
  155. background-color: $u-number-keyboard-background-color;
  156. flex-wrap: wrap;
  157. padding: $u-number-keyboard-padding;
  158. &__button-wrapper {
  159. box-shadow: $u-number-keyboard-button-box-shadow;
  160. margin: $u-number-keyboard-button-margin;
  161. border-top-left-radius: $u-number-keyboard-button-border-top-left-radius;
  162. border-top-right-radius: $u-number-keyboard-button-border-top-right-radius;
  163. border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius;
  164. border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius;
  165. &__button {
  166. width: $u-number-keyboard-button-width;
  167. height: $u-number-keyboard-button-height;
  168. background-color: $u-number-keyboard-button-background-color;
  169. @include flex;
  170. justify-content: center;
  171. align-items: center;
  172. border-top-left-radius: $u-number-keyboard-button-border-top-left-radius;
  173. border-top-right-radius: $u-number-keyboard-button-border-top-right-radius;
  174. border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius;
  175. border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius;
  176. &__text {
  177. font-size: $u-number-keyboard-text-font-size;
  178. font-weight: $u-number-keyboard-text-font-weight;
  179. color: $u-number-keyboard-text-color;
  180. }
  181. &--gray {
  182. background-color: $u-number-keyboard-gray-background-color;
  183. }
  184. }
  185. }
  186. }
  187. .u-hover-class {
  188. background-color: $u-number-keyboard-u-hover-class-background-color;
  189. }
  190. </style>