187 lines
9.0 KiB
Vue
187 lines
9.0 KiB
Vue
|
<template>
|
||
|
|
<view class="number-keyboard-component numberkeyboard">
|
||
|
|
<view class="keys">
|
||
|
|
<view
|
||
|
|
class="key button"
|
||
|
|
v-for="num in config.loop"
|
||
|
|
:key="num.key"
|
||
|
|
@tap="number(num.number)"
|
||
|
|
hover-class="hover-dark"
|
||
|
|
:hover-stay-time="50"
|
||
|
|
>{{num.number}}</view>
|
||
|
|
<view class="key button" @tap="del" style="background: #e2e7eb;"></view>
|
||
|
|
<view class="key button" @tap="number(0)">0</view>
|
||
|
|
<view class="key button" @tap="del" style="background: #e2e7eb;">
|
||
|
|
<image style="width: 50rpx;height: 50rpx;" src="data:image/png;base64,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
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* 数字键盘
|
||
|
|
* @event onChange 输入值改变时触发
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
name: 'number-keyboard',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
val: '',
|
||
|
|
config: {
|
||
|
|
loop: [
|
||
|
|
{number: 1,key: 'number-1'},
|
||
|
|
{number: 2,key: 'number-2'},
|
||
|
|
{number: 3,key: 'number-3'},
|
||
|
|
{number: 4,key: 'number-4'},
|
||
|
|
{number: 5,key: 'number-5'},
|
||
|
|
{number: 6,key: 'number-6'},
|
||
|
|
{number: 7,key: 'number-7'},
|
||
|
|
{number: 8,key: 'number-8'},
|
||
|
|
{number: 9,key: 'number-9'}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
length: {
|
||
|
|
type: Number,
|
||
|
|
default: 6
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
del() {
|
||
|
|
if(this.val.length > 0){
|
||
|
|
this.val = this.val.slice(0, this.val.length - 1);
|
||
|
|
this.$emit('onChange', this.val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
number(number) {
|
||
|
|
if(this.val.length < this.length){
|
||
|
|
this.val = this.val + number;
|
||
|
|
this.$emit('onChange', this.val)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped="scoped" lang="scss">
|
||
|
|
.number-keyboard-component {
|
||
|
|
width: 100%;
|
||
|
|
border-top: 1px solid #f1f4f4;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 60rpx;
|
||
|
|
background: #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.keys {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.key {
|
||
|
|
width: 250rpx;
|
||
|
|
height: 110rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-right: 1px solid #f1f4f4;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.key:nth-child(n + 4) {
|
||
|
|
border-top: 1px solid #f1f4f4;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.count-text {
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.numberkeyboard-popup {
|
||
|
|
width: 100%;
|
||
|
|
z-index: 10;
|
||
|
|
|
||
|
|
.count-text {
|
||
|
|
position: fixed;
|
||
|
|
top: -100px;
|
||
|
|
font-size: 28px;
|
||
|
|
color: #ffffff;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 500;
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding: 0 40px;
|
||
|
|
border-radius: 30px;
|
||
|
|
background: -webkit-linear-gradient(left top, #999999, #777777);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.desc-text {
|
||
|
|
position: fixed;
|
||
|
|
top: -40px;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #ffffff;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.number {
|
||
|
|
height: 70px;
|
||
|
|
line-height: 70px;
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #666666;
|
||
|
|
border-right: 1px solid #999999;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.number:nth-child(n + 4) {
|
||
|
|
border-top: 1px solid #999999;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.number:active {
|
||
|
|
background: #04be02;
|
||
|
|
color: #ffffff;
|
||
|
|
border: 0px solid #000000;
|
||
|
|
box-shadow: 0 0 2px 2px #09bb07;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.del {
|
||
|
|
height: 140px;
|
||
|
|
vertical-align: middle;
|
||
|
|
line-height: 140px;
|
||
|
|
border-bottom: 0.1px solid #999999;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.confirm {
|
||
|
|
font-size: 15px;
|
||
|
|
height: 140px;
|
||
|
|
line-height: 140px;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|