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.

315 lines
7.7 KiB

4 months ago
  1. <template>
  2. <view
  3. class="u-keyboard"
  4. @touchmove.stop.prevent="noop"
  5. >
  6. <view
  7. v-for="(group, i) in abc ? engKeyBoardList : areaList"
  8. :key="i"
  9. class="u-keyboard__button"
  10. :index="i"
  11. :class="[i + 1 === 4 && 'u-keyboard__button--center']"
  12. >
  13. <view
  14. v-if="i === 3"
  15. class="u-keyboard__button__inner-wrapper"
  16. >
  17. <view
  18. class="u-keyboard__button__inner-wrapper__left"
  19. hover-class="u-hover-class"
  20. :hover-stay-time="200"
  21. @tap="changeCarInputMode"
  22. >
  23. <text
  24. class="u-keyboard__button__inner-wrapper__left__lang"
  25. :class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
  26. ></text>
  27. <text class="u-keyboard__button__inner-wrapper__left__line">/</text>
  28. <text
  29. class="u-keyboard__button__inner-wrapper__left__lang"
  30. :class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
  31. ></text>
  32. </view>
  33. </view>
  34. <view
  35. class="u-keyboard__button__inner-wrapper"
  36. v-for="(item, j) in group"
  37. :key="j"
  38. >
  39. <view
  40. class="u-keyboard__button__inner-wrapper__inner"
  41. :hover-stay-time="200"
  42. @tap="carInputClick(i, j)"
  43. hover-class="u-hover-class"
  44. >
  45. <text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
  46. </view>
  47. </view>
  48. <view
  49. v-if="i === 3"
  50. @touchstart="backspaceClick"
  51. @touchend="clearTimer"
  52. class="u-keyboard__button__inner-wrapper"
  53. >
  54. <view
  55. class="u-keyboard__button__inner-wrapper__right"
  56. hover-class="u-hover-class"
  57. :hover-stay-time="200"
  58. >
  59. <u-icon
  60. size="28"
  61. name="backspace"
  62. color="#303133"
  63. ></u-icon>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. </template>
  69. <script>
  70. import { props } from './props';
  71. import { mpMixin } from '../../libs/mixin/mpMixin';
  72. import { mixin } from '../../libs/mixin/mixin';
  73. import { randomArray, sleep } from '../../libs/function/index';
  74. /**
  75. * keyboard 键盘组件
  76. * @description 此为uView自定义的键盘面板内含了数字键盘车牌号键身份证号键盘3种模式都有可以打乱按键顺序的选项
  77. * @tutorial https://uview-plus.jiangruyi.com/components/keyboard.html
  78. * @property {Boolean} random 是否打乱键盘的顺序
  79. * @event {Function} change 点击键盘触发
  80. * @event {Function} backspace 点击退格键触发
  81. * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
  82. */
  83. export default {
  84. name: "u-keyboard",
  85. mixins: [mpMixin, mixin, props],
  86. data() {
  87. return {
  88. // 车牌输入时,abc=true为输入车牌号码,bac=false为输入省份中文简称
  89. abc: false
  90. };
  91. },
  92. computed: {
  93. areaList() {
  94. let data = [
  95. '京',
  96. '沪',
  97. '粤',
  98. '津',
  99. '冀',
  100. '豫',
  101. '云',
  102. '辽',
  103. '黑',
  104. '湘',
  105. '皖',
  106. '鲁',
  107. '苏',
  108. '浙',
  109. '赣',
  110. '鄂',
  111. '桂',
  112. '甘',
  113. '晋',
  114. '陕',
  115. '蒙',
  116. '吉',
  117. '闽',
  118. '贵',
  119. '渝',
  120. '川',
  121. '青',
  122. '琼',
  123. '宁',
  124. '挂',
  125. '藏',
  126. '港',
  127. '澳',
  128. '新',
  129. '使',
  130. '学'
  131. ];
  132. let tmp = [];
  133. // 打乱顺序
  134. if (this.random) data = randomArray(data);
  135. // 切割成二维数组
  136. tmp[0] = data.slice(0, 10);
  137. tmp[1] = data.slice(10, 20);
  138. tmp[2] = data.slice(20, 30);
  139. tmp[3] = data.slice(30, 36);
  140. return tmp;
  141. },
  142. engKeyBoardList() {
  143. let data = [
  144. 1,
  145. 2,
  146. 3,
  147. 4,
  148. 5,
  149. 6,
  150. 7,
  151. 8,
  152. 9,
  153. 0,
  154. 'Q',
  155. 'W',
  156. 'E',
  157. 'R',
  158. 'T',
  159. 'Y',
  160. 'U',
  161. 'I',
  162. 'O',
  163. 'P',
  164. 'A',
  165. 'S',
  166. 'D',
  167. 'F',
  168. 'G',
  169. 'H',
  170. 'J',
  171. 'K',
  172. 'L',
  173. 'Z',
  174. 'X',
  175. 'C',
  176. 'V',
  177. 'B',
  178. 'N',
  179. 'M'
  180. ];
  181. let tmp = [];
  182. if (this.random) data = randomArray(data);
  183. tmp[0] = data.slice(0, 10);
  184. tmp[1] = data.slice(10, 20);
  185. tmp[2] = data.slice(20, 30);
  186. tmp[3] = data.slice(30, 36);
  187. return tmp;
  188. }
  189. },
  190. emits: ["change", "backspace"],
  191. methods: {
  192. // 点击键盘按钮
  193. carInputClick(i, j) {
  194. let value = '';
  195. // 不同模式,获取不同数组的值
  196. if (this.abc) value = this.engKeyBoardList[i][j];
  197. else value = this.areaList[i][j];
  198. // 如果允许自动切换,则将中文状态切换为英文
  199. if (!this.abc && this.autoChange) sleep(200).then(() => this.abc = true)
  200. this.$emit('change', value);
  201. },
  202. // 修改汽车牌键盘的输入模式,中文|英文
  203. changeCarInputMode() {
  204. this.abc = !this.abc;
  205. },
  206. // 点击退格键
  207. backspaceClick() {
  208. this.$emit('backspace');
  209. clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
  210. this.timer = null;
  211. this.timer = setInterval(() => {
  212. this.$emit('backspace');
  213. }, 250);
  214. },
  215. clearTimer() {
  216. clearInterval(this.timer);
  217. this.timer = null;
  218. },
  219. }
  220. };
  221. </script>
  222. <style lang="scss" scoped>
  223. @import "../../libs/css/components.scss";
  224. $u-car-keyboard-background-color: rgb(224, 228, 230) !default;
  225. $u-car-keyboard-padding:6px 0 6px !default;
  226. $u-car-keyboard-button-inner-width:64rpx !default;
  227. $u-car-keyboard-button-inner-background-color:#FFFFFF !default;
  228. $u-car-keyboard-button-height:80rpx !default;
  229. $u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
  230. $u-car-keyboard-button-border-radius:4px !default;
  231. $u-car-keyboard-button-inner-margin:8rpx 5rpx !default;
  232. $u-car-keyboard-button-text-font-size:16px !default;
  233. $u-car-keyboard-button-text-color:$u-main-color !default;
  234. $u-car-keyboard-center-inner-margin: 0 4rpx !default;
  235. $u-car-keyboard-special-button-width:134rpx !default;
  236. $u-car-keyboard-lang-font-size:16px !default;
  237. $u-car-keyboard-lang-color:$u-main-color !default;
  238. $u-car-keyboard-active-color:$u-primary !default;
  239. $u-car-keyboard-line-font-size:15px !default;
  240. $u-car-keyboard-line-color:$u-main-color !default;
  241. $u-car-keyboard-line-margin:0 1px !default;
  242. $u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default;
  243. .u-keyboard {
  244. @include flex(column);
  245. justify-content: space-around;
  246. background-color: $u-car-keyboard-background-color;
  247. align-items: stretch;
  248. padding: $u-car-keyboard-padding;
  249. &__button {
  250. @include flex;
  251. justify-content: center;
  252. flex: 1;
  253. /* #ifndef APP-NVUE */
  254. /* #endif */
  255. &__inner-wrapper {
  256. box-shadow: $u-car-keyboard-button-inner-box-shadow;
  257. margin: $u-car-keyboard-button-inner-margin;
  258. border-radius: $u-car-keyboard-button-border-radius;
  259. &__inner {
  260. @include flex;
  261. justify-content: center;
  262. align-items: center;
  263. width: $u-car-keyboard-button-inner-width;
  264. background-color: $u-car-keyboard-button-inner-background-color;
  265. height: $u-car-keyboard-button-height;
  266. border-radius: $u-car-keyboard-button-border-radius;
  267. &__text {
  268. font-size: $u-car-keyboard-button-text-font-size;
  269. color: $u-car-keyboard-button-text-color;
  270. }
  271. }
  272. &__left,
  273. &__right {
  274. border-radius: $u-car-keyboard-button-border-radius;
  275. width: $u-car-keyboard-special-button-width;
  276. height: $u-car-keyboard-button-height;
  277. background-color: $u-car-keyboard-u-hover-class-background-color;
  278. @include flex;
  279. justify-content: center;
  280. align-items: center;
  281. box-shadow: $u-car-keyboard-button-inner-box-shadow;
  282. }
  283. &__left {
  284. &__line {
  285. font-size: $u-car-keyboard-line-font-size;
  286. color: $u-car-keyboard-line-color;
  287. margin: $u-car-keyboard-line-margin;
  288. }
  289. &__lang {
  290. font-size: $u-car-keyboard-lang-font-size;
  291. color: $u-car-keyboard-lang-color;
  292. &--active {
  293. color: $u-car-keyboard-active-color;
  294. }
  295. }
  296. }
  297. }
  298. }
  299. }
  300. .u-hover-class {
  301. background-color: $u-car-keyboard-u-hover-class-background-color;
  302. }
  303. </style>