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.
311 lines
7.8 KiB
311 lines
7.8 KiB
<template> |
|
<view |
|
class="u-keyboard" |
|
@touchmove.stop.prevent="noop" |
|
> |
|
<view |
|
v-for="(group, i) in abc ? engKeyBoardList : areaList" |
|
:key="i" |
|
class="u-keyboard__button" |
|
:index="i" |
|
:class="[i + 1 === 4 && 'u-keyboard__button--center']" |
|
> |
|
<view |
|
v-if="i === 3" |
|
class="u-keyboard__button__inner-wrapper" |
|
> |
|
<view |
|
class="u-keyboard__button__inner-wrapper__left" |
|
hover-class="u-hover-class" |
|
:hover-stay-time="200" |
|
@tap="changeCarInputMode" |
|
> |
|
<text |
|
class="u-keyboard__button__inner-wrapper__left__lang" |
|
:class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']" |
|
>中</text> |
|
<text class="u-keyboard__button__inner-wrapper__left__line">/</text> |
|
<text |
|
class="u-keyboard__button__inner-wrapper__left__lang" |
|
:class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']" |
|
>英</text> |
|
</view> |
|
</view> |
|
<view |
|
class="u-keyboard__button__inner-wrapper" |
|
v-for="(item, j) in group" |
|
:key="j" |
|
> |
|
<view |
|
class="u-keyboard__button__inner-wrapper__inner" |
|
:hover-stay-time="200" |
|
@tap="carInputClick(i, j)" |
|
hover-class="u-hover-class" |
|
> |
|
<text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text> |
|
</view> |
|
</view> |
|
<view |
|
v-if="i === 3" |
|
@touchstart="backspaceClick" |
|
@touchend="clearTimer" |
|
class="u-keyboard__button__inner-wrapper" |
|
> |
|
<view |
|
class="u-keyboard__button__inner-wrapper__right" |
|
hover-class="u-hover-class" |
|
:hover-stay-time="200" |
|
> |
|
<u-icon |
|
size="28" |
|
name="backspace" |
|
color="#303133" |
|
></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import props from './props.js'; |
|
/** |
|
* keyboard 键盘组件 |
|
* @description 此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。 |
|
* @tutorial https://uviewui.com/components/keyboard.html |
|
* @property {Boolean} random 是否打乱键盘的顺序 |
|
* @event {Function} change 点击键盘触发 |
|
* @event {Function} backspace 点击退格键触发 |
|
* @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard> |
|
*/ |
|
export default { |
|
name: "u-keyboard", |
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|
data() { |
|
return { |
|
// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称 |
|
abc: false |
|
}; |
|
}, |
|
computed: { |
|
areaList() { |
|
let data = [ |
|
'京', |
|
'沪', |
|
'粤', |
|
'津', |
|
'冀', |
|
'豫', |
|
'云', |
|
'辽', |
|
'黑', |
|
'湘', |
|
'皖', |
|
'鲁', |
|
'苏', |
|
'浙', |
|
'赣', |
|
'鄂', |
|
'桂', |
|
'甘', |
|
'晋', |
|
'陕', |
|
'蒙', |
|
'吉', |
|
'闽', |
|
'贵', |
|
'渝', |
|
'川', |
|
'青', |
|
'琼', |
|
'宁', |
|
'挂', |
|
'藏', |
|
'港', |
|
'澳', |
|
'新', |
|
'使', |
|
'学' |
|
]; |
|
let tmp = []; |
|
// 打乱顺序 |
|
if (this.random) data = uni.$u.randomArray(data); |
|
// 切割成二维数组 |
|
tmp[0] = data.slice(0, 10); |
|
tmp[1] = data.slice(10, 20); |
|
tmp[2] = data.slice(20, 30); |
|
tmp[3] = data.slice(30, 36); |
|
return tmp; |
|
}, |
|
engKeyBoardList() { |
|
let data = [ |
|
1, |
|
2, |
|
3, |
|
4, |
|
5, |
|
6, |
|
7, |
|
8, |
|
9, |
|
0, |
|
'Q', |
|
'W', |
|
'E', |
|
'R', |
|
'T', |
|
'Y', |
|
'U', |
|
'I', |
|
'O', |
|
'P', |
|
'A', |
|
'S', |
|
'D', |
|
'F', |
|
'G', |
|
'H', |
|
'J', |
|
'K', |
|
'L', |
|
'Z', |
|
'X', |
|
'C', |
|
'V', |
|
'B', |
|
'N', |
|
'M' |
|
]; |
|
let tmp = []; |
|
if (this.random) data = uni.$u.randomArray(data); |
|
tmp[0] = data.slice(0, 10); |
|
tmp[1] = data.slice(10, 20); |
|
tmp[2] = data.slice(20, 30); |
|
tmp[3] = data.slice(30, 36); |
|
return tmp; |
|
} |
|
}, |
|
methods: { |
|
// 点击键盘按钮 |
|
carInputClick(i, j) { |
|
let value = ''; |
|
// 不同模式，获取不同数组的值 |
|
if (this.abc) value = this.engKeyBoardList[i][j]; |
|
else value = this.areaList[i][j]; |
|
// 如果允许自动切换，则将中文状态切换为英文 |
|
if (!this.abc && this.autoChange) uni.$u.sleep(200).then(() => this.abc = true) |
|
this.$emit('change', value); |
|
}, |
|
// 修改汽车牌键盘的输入模式，中文|英文 |
|
changeCarInputMode() { |
|
this.abc = !this.abc; |
|
}, |
|
// 点击退格键 |
|
backspaceClick() { |
|
this.$emit('backspace'); |
|
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器 |
|
this.timer = null; |
|
this.timer = setInterval(() => { |
|
this.$emit('backspace'); |
|
}, 250); |
|
}, |
|
clearTimer() { |
|
clearInterval(this.timer); |
|
this.timer = null; |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/components.scss"; |
|
$u-car-keyboard-background-color: rgb(224, 228, 230) !default; |
|
$u-car-keyboard-padding:6px 0 6px !default; |
|
$u-car-keyboard-button-inner-width:64rpx !default; |
|
$u-car-keyboard-button-inner-background-color:#FFFFFF !default; |
|
$u-car-keyboard-button-height:80rpx !default; |
|
$u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default; |
|
$u-car-keyboard-button-border-radius:4px !default; |
|
$u-car-keyboard-button-inner-margin:8rpx 5rpx !default; |
|
$u-car-keyboard-button-text-font-size:16px !default; |
|
$u-car-keyboard-button-text-color:$u-main-color !default; |
|
$u-car-keyboard-center-inner-margin: 0 4rpx !default; |
|
$u-car-keyboard-special-button-width:134rpx !default; |
|
$u-car-keyboard-lang-font-size:16px !default; |
|
$u-car-keyboard-lang-color:$u-main-color !default; |
|
$u-car-keyboard-active-color:$u-primary !default; |
|
$u-car-keyboard-line-font-size:15px !default; |
|
$u-car-keyboard-line-color:$u-main-color !default; |
|
$u-car-keyboard-line-margin:0 1px !default; |
|
$u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default; |
|
|
|
.u-keyboard { |
|
@include flex(column); |
|
justify-content: space-around; |
|
background-color: $u-car-keyboard-background-color; |
|
align-items: stretch; |
|
padding: $u-car-keyboard-padding; |
|
|
|
&__button { |
|
@include flex; |
|
justify-content: center; |
|
flex: 1; |
|
/* #ifndef APP-NVUE */ |
|
/* #endif */ |
|
|
|
&__inner-wrapper { |
|
box-shadow: $u-car-keyboard-button-inner-box-shadow; |
|
margin: $u-car-keyboard-button-inner-margin; |
|
border-radius: $u-car-keyboard-button-border-radius; |
|
|
|
&__inner { |
|
@include flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: $u-car-keyboard-button-inner-width; |
|
background-color: $u-car-keyboard-button-inner-background-color; |
|
height: $u-car-keyboard-button-height; |
|
border-radius: $u-car-keyboard-button-border-radius; |
|
|
|
&__text { |
|
font-size: $u-car-keyboard-button-text-font-size; |
|
color: $u-car-keyboard-button-text-color; |
|
} |
|
} |
|
|
|
&__left, |
|
&__right { |
|
border-radius: $u-car-keyboard-button-border-radius; |
|
width: $u-car-keyboard-special-button-width; |
|
height: $u-car-keyboard-button-height; |
|
background-color: $u-car-keyboard-u-hover-class-background-color; |
|
@include flex; |
|
justify-content: center; |
|
align-items: center; |
|
box-shadow: $u-car-keyboard-button-inner-box-shadow; |
|
} |
|
|
|
&__left { |
|
&__line { |
|
font-size: $u-car-keyboard-line-font-size; |
|
color: $u-car-keyboard-line-color; |
|
margin: $u-car-keyboard-line-margin; |
|
} |
|
|
|
&__lang { |
|
font-size: $u-car-keyboard-lang-font-size; |
|
color: $u-car-keyboard-lang-color; |
|
|
|
&--active { |
|
color: $u-car-keyboard-active-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.u-hover-class { |
|
background-color: $u-car-keyboard-u-hover-class-background-color; |
|
} |
|
</style>
|
|
|