u-car-keyboard.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  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.js';
  71. /**
  72. * keyboard 键盘组件
  73. * @description 此为uView自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3种模式,都有可以打乱按键顺序的选项。
  74. * @tutorial https://uviewui.com/components/keyboard.html
  75. * @property {Boolean} random 是否打乱键盘的顺序
  76. * @event {Function} change 点击键盘触发
  77. * @event {Function} backspace 点击退格键触发
  78. * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
  79. */
  80. export default {
  81. name: "u-keyboard",
  82. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  83. data() {
  84. return {
  85. // 车牌输入时,abc=true为输入车牌号码,bac=false为输入省份中文简称
  86. abc: false
  87. };
  88. },
  89. computed: {
  90. areaList() {
  91. let data = [
  92. '京',
  93. '沪',
  94. '粤',
  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. let tmp = [];
  130. // 打乱顺序
  131. if (this.random) data = uni.$u.randomArray(data);
  132. // 切割成二维数组
  133. tmp[0] = data.slice(0, 10);
  134. tmp[1] = data.slice(10, 20);
  135. tmp[2] = data.slice(20, 30);
  136. tmp[3] = data.slice(30, 36);
  137. return tmp;
  138. },
  139. engKeyBoardList() {
  140. let data = [
  141. 1,
  142. 2,
  143. 3,
  144. 4,
  145. 5,
  146. 6,
  147. 7,
  148. 8,
  149. 9,
  150. 0,
  151. 'Q',
  152. 'W',
  153. 'E',
  154. 'R',
  155. 'T',
  156. 'Y',
  157. 'U',
  158. 'I',
  159. 'O',
  160. 'P',
  161. 'A',
  162. 'S',
  163. 'D',
  164. 'F',
  165. 'G',
  166. 'H',
  167. 'J',
  168. 'K',
  169. 'L',
  170. 'Z',
  171. 'X',
  172. 'C',
  173. 'V',
  174. 'B',
  175. 'N',
  176. 'M'
  177. ];
  178. let tmp = [];
  179. if (this.random) data = uni.$u.randomArray(data);
  180. tmp[0] = data.slice(0, 10);
  181. tmp[1] = data.slice(10, 20);
  182. tmp[2] = data.slice(20, 30);
  183. tmp[3] = data.slice(30, 36);
  184. return tmp;
  185. }
  186. },
  187. methods: {
  188. // 点击键盘按钮
  189. carInputClick(i, j) {
  190. let value = '';
  191. // 不同模式,获取不同数组的值
  192. if (this.abc) value = this.engKeyBoardList[i][j];
  193. else value = this.areaList[i][j];
  194. // 如果允许自动切换,则将中文状态切换为英文
  195. if (!this.abc && this.autoChange) uni.$u.sleep(200).then(() => this.abc = true)
  196. this.$emit('change', value);
  197. },
  198. // 修改汽车牌键盘的输入模式,中文|英文
  199. changeCarInputMode() {
  200. this.abc = !this.abc;
  201. },
  202. // 点击退格键
  203. backspaceClick() {
  204. this.$emit('backspace');
  205. clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
  206. this.timer = null;
  207. this.timer = setInterval(() => {
  208. this.$emit('backspace');
  209. }, 250);
  210. },
  211. clearTimer() {
  212. clearInterval(this.timer);
  213. this.timer = null;
  214. },
  215. }
  216. };
  217. </script>
  218. <style lang="scss" scoped>
  219. @import "../../libs/css/components.scss";
  220. $u-car-keyboard-background-color: rgb(224, 228, 230) !default;
  221. $u-car-keyboard-padding:6px 0 6px !default;
  222. $u-car-keyboard-button-inner-width:64rpx !default;
  223. $u-car-keyboard-button-inner-background-color:#FFFFFF !default;
  224. $u-car-keyboard-button-height:80rpx !default;
  225. $u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
  226. $u-car-keyboard-button-border-radius:4px !default;
  227. $u-car-keyboard-button-inner-margin:8rpx 5rpx !default;
  228. $u-car-keyboard-button-text-font-size:16px !default;
  229. $u-car-keyboard-button-text-color:$u-main-color !default;
  230. $u-car-keyboard-center-inner-margin: 0 4rpx !default;
  231. $u-car-keyboard-special-button-width:134rpx !default;
  232. $u-car-keyboard-lang-font-size:16px !default;
  233. $u-car-keyboard-lang-color:$u-main-color !default;
  234. $u-car-keyboard-active-color:$u-primary !default;
  235. $u-car-keyboard-line-font-size:15px !default;
  236. $u-car-keyboard-line-color:$u-main-color !default;
  237. $u-car-keyboard-line-margin:0 1px !default;
  238. $u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default;
  239. .u-keyboard {
  240. @include flex(column);
  241. justify-content: space-around;
  242. background-color: $u-car-keyboard-background-color;
  243. align-items: stretch;
  244. padding: $u-car-keyboard-padding;
  245. &__button {
  246. @include flex;
  247. justify-content: center;
  248. flex: 1;
  249. /* #ifndef APP-NVUE */
  250. /* #endif */
  251. &__inner-wrapper {
  252. box-shadow: $u-car-keyboard-button-inner-box-shadow;
  253. margin: $u-car-keyboard-button-inner-margin;
  254. border-radius: $u-car-keyboard-button-border-radius;
  255. &__inner {
  256. @include flex;
  257. justify-content: center;
  258. align-items: center;
  259. width: $u-car-keyboard-button-inner-width;
  260. background-color: $u-car-keyboard-button-inner-background-color;
  261. height: $u-car-keyboard-button-height;
  262. border-radius: $u-car-keyboard-button-border-radius;
  263. &__text {
  264. font-size: $u-car-keyboard-button-text-font-size;
  265. color: $u-car-keyboard-button-text-color;
  266. }
  267. }
  268. &__left,
  269. &__right {
  270. border-radius: $u-car-keyboard-button-border-radius;
  271. width: $u-car-keyboard-special-button-width;
  272. height: $u-car-keyboard-button-height;
  273. background-color: $u-car-keyboard-u-hover-class-background-color;
  274. @include flex;
  275. justify-content: center;
  276. align-items: center;
  277. box-shadow: $u-car-keyboard-button-inner-box-shadow;
  278. }
  279. &__left {
  280. &__line {
  281. font-size: $u-car-keyboard-line-font-size;
  282. color: $u-car-keyboard-line-color;
  283. margin: $u-car-keyboard-line-margin;
  284. }
  285. &__lang {
  286. font-size: $u-car-keyboard-lang-font-size;
  287. color: $u-car-keyboard-lang-color;
  288. &--active {
  289. color: $u-car-keyboard-active-color;
  290. }
  291. }
  292. }
  293. }
  294. }
  295. }
  296. .u-hover-class {
  297. background-color: $u-car-keyboard-u-hover-class-background-color;
  298. }
  299. </style>