<template>
<u-popup
class
:mask="mask"
:maskCloseAble="maskCloseAble"
mode="bottom"
:popup="false"
v-model="value"
length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom"
@close="popupClose"
>
<slot />
<view class="u-tooltip" v-if="tooltip">
<view
class="u-tooltip-item u-tooltip-cancel"
hover-class="u-tooltip-cancel-hover"
@tap="onCancel"
>{{cancelBtn ? '取消' : ''}}</view>
<view
v-if="showTips"
class="u-tooltip-item u-tooltip-tips"
>{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</view>
<view
v-if="confirmBtn"
@tap="onConfirm"
class="u-tooltip-item u-tooltips-submit"
hover-class="u-tooltips-submit-hover"
>{{confirmBtn ? '完成' : ''}}</view>
</view>
<block v-if="mode == 'number' || mode == 'card'">
<u-number-keyboard
:random="random"
@backspace="backspace"
@change="change"
:mode="mode"
:dotEnabled="dotEnabled"
></u-number-keyboard>
</block>
<block v-else>
<u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
</block>
</u-popup>
</template>
<script>
export default {
name: 'u-keyboard',
props: {
mode: {
type: String,
default: 'number'
},
dotEnabled: {
type: Boolean,
default: true
},
tooltip: {
type: Boolean,
default: true
},
showTips: {
type: Boolean,
default: true
},
tips: {
type: String,
default: ''
},
cancelBtn: {
type: Boolean,
default: true
},
confirmBtn: {
type: Boolean,
default: true
},
random: {
type: Boolean,
default: false
},
safeAreaInsetBottom: {
type: Boolean,
default: false
},
maskCloseAble: {
type: Boolean,
default: true
},
value: {
type: Boolean,
default: false
},
mask: {
type: Boolean,
default: true
},
zIndex: {
type: [Number, String],
default: ''
}
},
data() {
return {
}
},
computed: {
uZIndex() {
return this.zIndex ? this.zIndex : this.$u.zIndex.popup
}
},
methods: {
change(e) {
this.$emit('change', e)
},
popupClose() {
this.$emit('input', false)
},
onConfirm() {
this.popupClose()
this.$emit('confirm')
},
onCancel() {
this.popupClose()
this.$emit('cancel')
},
backspace() {
this.$emit('backspace')
}
}
}
</script>
<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';
.u-keyboard {
position: relative;
z-index: 1003;
}
.u-tooltip {
display: flex;
justify-content: space-between;
}
.u-tooltip-item {
color: #333333;
flex: 0 0 33.333333%;
text-align: center;
padding: 10rpx 5rpx;
font-size: 14rpx;
}
.u-tooltips-submit {
text-align: right;
flex-grow: 1;
flex-wrap: 0;
padding-right: 20rpx;
color: $u-type-primary;
}
.u-tooltip-cancel {
text-align: left;
flex-grow: 1;
flex-wrap: 0;
padding-left: 20rpx;
color: #888888;
}
.u-tooltips-submit-hover {
color: $u-type-success;
}
.u-tooltip-cancel-hover {
color: #333333;
}
</style>