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