u-number-keyboard.vue 6.1 KB

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