u-car-keyboard.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <template>
  2. <view class="u-keyboard" @touchmove.stop.prevent="() => {}">
  3. <view class="u-keyboard-grids">
  4. <block>
  5. <view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
  6. <view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
  7. v-for="(item, j) in group" :key="j">
  8. {{ item }}
  9. </view>
  10. </view>
  11. <view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
  12. hover-class="u-hover-class">
  13. <u-icon :size="38" name="backspace" :bold="true"></u-icon>
  14. </view>
  15. <view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
  16. <text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
  17. /
  18. <text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
  19. </view>
  20. </block>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. name: "u-keyboard",
  27. props: {
  28. // 是否打乱键盘按键的顺序
  29. random: {
  30. type: Boolean,
  31. default: false
  32. }
  33. },
  34. data() {
  35. return {
  36. // 车牌输入时,abc=true为输入车牌号码,bac=false为输入省份中文简称
  37. abc: false
  38. };
  39. },
  40. computed: {
  41. areaList() {
  42. let data = [
  43. '京',
  44. '沪',
  45. '粤',
  46. '津',
  47. '冀',
  48. '豫',
  49. '云',
  50. '辽',
  51. '黑',
  52. '湘',
  53. '皖',
  54. '鲁',
  55. '苏',
  56. '浙',
  57. '赣',
  58. '鄂',
  59. '桂',
  60. '甘',
  61. '晋',
  62. '陕',
  63. '蒙',
  64. '吉',
  65. '闽',
  66. '贵',
  67. '渝',
  68. '川',
  69. '青',
  70. '琼',
  71. '宁',
  72. '挂',
  73. '藏',
  74. '港',
  75. '澳',
  76. '新',
  77. '使',
  78. '学'
  79. ];
  80. let tmp = [];
  81. // 打乱顺序
  82. if (this.random) data = this.$u.randomArray(data);
  83. // 切割成二维数组
  84. tmp[0] = data.slice(0, 10);
  85. tmp[1] = data.slice(10, 20);
  86. tmp[2] = data.slice(20, 30);
  87. tmp[3] = data.slice(30, 36);
  88. return tmp;
  89. },
  90. EngKeyBoardList() {
  91. let data = [
  92. 1,
  93. 2,
  94. 3,
  95. 4,
  96. 5,
  97. 6,
  98. 7,
  99. 8,
  100. 9,
  101. 0,
  102. 'Q',
  103. 'W',
  104. 'E',
  105. 'R',
  106. 'T',
  107. 'Y',
  108. 'U',
  109. 'I',
  110. 'O',
  111. 'P',
  112. 'A',
  113. 'S',
  114. 'D',
  115. 'F',
  116. 'G',
  117. 'H',
  118. 'J',
  119. 'K',
  120. 'L',
  121. 'Z',
  122. 'X',
  123. 'C',
  124. 'V',
  125. 'B',
  126. 'N',
  127. 'M'
  128. ];
  129. let tmp = [];
  130. if (this.random) data = this.$u.randomArray(data);
  131. tmp[0] = data.slice(0, 10);
  132. tmp[1] = data.slice(10, 20);
  133. tmp[2] = data.slice(20, 30);
  134. tmp[3] = data.slice(30, 36);
  135. return tmp;
  136. }
  137. },
  138. methods: {
  139. // 点击键盘按钮
  140. carInputClick(i, j) {
  141. let value = '';
  142. // 不同模式,获取不同数组的值
  143. if (this.abc) value = this.EngKeyBoardList[i][j];
  144. else value = this.areaList[i][j];
  145. this.$emit('change', value);
  146. },
  147. // 修改汽车牌键盘的输入模式,中文|英文
  148. changeCarInputMode() {
  149. this.abc = !this.abc;
  150. },
  151. // 点击退格键
  152. backspaceClick() {
  153. this.$emit('backspace');
  154. clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
  155. this.timer = null;
  156. this.timer = setInterval(() => {
  157. this.$emit('backspace');
  158. }, 250);
  159. },
  160. clearTimer() {
  161. clearInterval(this.timer);
  162. this.timer = null;
  163. },
  164. }
  165. };
  166. </script>
  167. <style lang="scss" scoped>
  168. @import "../../libs/css/style.components.scss";
  169. .u-keyboard-grids {
  170. background: rgb(215, 215, 217);
  171. padding: 24rpx 0;
  172. position: relative;
  173. }
  174. .u-keyboard-grids-item {
  175. @include vue-flex;
  176. align-items: center;
  177. justify-content: center;
  178. }
  179. .u-keyboard-grids-btn {
  180. text-decoration: none;
  181. width: 62rpx;
  182. flex: 0 0 64rpx;
  183. height: 80rpx;
  184. /* #ifndef APP-NVUE */
  185. display: inline-flex;
  186. /* #endif */
  187. font-size: 36rpx;
  188. text-align: center;
  189. line-height: 80rpx;
  190. background-color: #fff;
  191. margin: 8rpx 5rpx;
  192. border-radius: 8rpx;
  193. box-shadow: 0 2rpx 0rpx #888992;
  194. font-weight: 500;
  195. justify-content: center;
  196. }
  197. .u-carinput-hover {
  198. background-color: rgb(185, 188, 195) !important;
  199. }
  200. .u-keyboard-back {
  201. position: absolute;
  202. width: 96rpx;
  203. right: 22rpx;
  204. bottom: 32rpx;
  205. height: 80rpx;
  206. background-color: rgb(185, 188, 195);
  207. @include vue-flex;
  208. align-items: center;
  209. border-radius: 8rpx;
  210. justify-content: center;
  211. box-shadow: 0 2rpx 0rpx #888992;
  212. }
  213. .u-keyboard-change {
  214. font-size: 24rpx;
  215. box-shadow: 0 2rpx 0rpx #888992;
  216. position: absolute;
  217. width: 96rpx;
  218. left: 22rpx;
  219. line-height: 1;
  220. bottom: 32rpx;
  221. height: 80rpx;
  222. background-color: #ffffff;
  223. @include vue-flex;
  224. align-items: center;
  225. border-radius: 8rpx;
  226. justify-content: center;
  227. }
  228. .u-keyboard-change .inactive.zh {
  229. transform: scale(0.85) translateY(-10rpx);
  230. }
  231. .u-keyboard-change .inactive.en {
  232. transform: scale(0.85) translateY(10rpx);
  233. }
  234. .u-keyboard-change .active {
  235. color: rgb(237, 112, 64);
  236. font-size: 30rpx;
  237. }
  238. .u-keyboard-change .zh {
  239. transform: translateY(-10rpx);
  240. }
  241. .u-keyboard-change .en {
  242. transform: translateY(10rpx);
  243. }
  244. </style>