自定义的数字键盘
鉴于使用系统自带输入键盘会造成挤压页面等问题，同时也不能满足设计需求，因此自己去写了个键盘组件。
效果如下：
由于是写键盘组件的使用 所以页面也没有过多的样式 大家见谅.
效果图.png
效果图已贴上，下面就直接贴代码了
首先在组件component目录下新建.vue页面 例如：keyboard.vue
代码内容如下：
<template>
<div class='key-container' v-if="keyBoard">
<div class="input-box">
<div class='input' v-text="count">
</div>
<i class="icon"></i>
<span class="sales-unit">{{unit}}</span>
<!--<input class='input' placeholder="请输入数量" v-model="money" autofocus>-->
<!-- <span class="sales-unit">{{good.sales_unit}}</span>-->
</div>
<div class='keyboard' @click.stop='_handleKeyPress'>
<div class='key-row'>
<div class='key-cell' data-num='1'>1</div>
<div class='key-cell' data-num='2'>2</div>
<div class='key-cell' data-num='3'>3</div>
<div class='key-cell' data-num='D'>C</div>
</div>
<div class='key-row'>
<div class='key-cell' data-num='4'>4</div>
<div class='key-cell' data-num='5'>5</div>
<div class='key-cell' data-num='6'>6</div>
<div class='key-cell' data-num='-1'></div>
</div>
<div class='key-row'>
<div class='key-cell' data-num='7'>7</div>
<div class='key-cell' data-num='8'>8</div>
<div class='key-cell' data-num='9'>9</div>
<div class='key-cell' data-num='-1'></div>
</div>
<div class='key-row'>
<div class='key-cell' data-num='0' style="flex: 2">0</div>
<div class='key-cell' data-num='.'>.</div>
<div class='key-cell' data-num='-1'></div>
</div>
<div class='key-confirm' data-num='S'>确认</div>
</div>
</div>
</template>
<script>
export default {
props: {
num: { //获取输入的值
type: Number,
default: function() {
return 0;
},
},
unit:{ //单位
type:String,
default:'元'
},
keyBoard:{ //是否显示键盘
type:Boolean,
default:false
}
},
data() {
return {
count: '' //输入的值
};
},
watch: {
keyBoard() {
if (this.num) {
this.count = this.num; //将上次输入的值带入
}
else {
this.count = '';
}
},
},
methods: {
//处理按键
_handleKeyPress(e) {
let num = e.target.dataset.num;
//不同按键处理逻辑
// -1 代表无效按键，直接返回
if (num == -1) {
return false;
}
switch (String(num)) {
//小数点
case '.':
this._handleDecimalPoint();
break;
//删除键
case 'D':
this._handleDeleteKey();
break;
//清空键
case 'C':
this._handleClearKey();
break;
//确认键
case 'S':
this._handleConfirmKey();
break;
default:
this._handleNumberKey(num);
break;
}
},
//处理小数点函数
_handleDecimalPoint() {
let S = this.count.toString();
//如果包含小数点，直接返回
if (S.indexOf('.') > -1) {
return false;
}
//如果小数点是第一位，补0
if (!S.length) {
this.count = '0.';
}//如果不是，添加一个小数点
else {
this.count = this.count + '.';
}
},
//处理删除键
_handleDeleteKey() {
let S = this.count.toString();
//如果没有输入，直接返回
if (!S.length) {
return false;
}
//否则删除最后一个
this.count = S.substring(0, S.length - 1);
},
//处理清空键
_handleClearKey() {
this.count = '';
},
//处理数字
_handleNumberKey(num) {
let S = this.count.toString();
//如果有小数点且小数点位数不小于2
if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2) {
this.count = S + num;
}
//没有小数点
if (!(S.indexOf('.') > -1)) {
//如果第一位是0，只能输入小数点
if (num == 0 && S.length == 0) {
this.count = '0';
}
else {
if (S.length && Number(S.charAt(0)) === 0) {
return;
}
this.count = S + num;
}
}
},
//提交
_handleConfirmKey() {
let count = this.count;
count = Number(count);
this.$emit('getCount',count) //将输入的值传到父组件
this.keyBoard = false //隐藏键盘
},
},
};
</script>
<style lang="scss">
@-webkit-keyframes cursor{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes cursor{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
.key-container {
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100%;
background: #fff;
bottom: 0;
left: 0;
z-index: 101;
border-top: 2px solid #eee;
}
.input-box {
position: relative;
width: 100%;
padding: 30px 95px 30px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.icon{
position: absolute;
top:50%;
right:90px;
margin-top:-18px;
width: 2px;
height: 36px;
background: #39383d;
opacity: 0;
animation:cursor 1s infinite;
-webkit-animation:cursor 1s infinite;
}
.sales-unit {
position: absolute;
top: 30px;
right: 20px;
font-size: 30px;
}
}
.input {
border-bottom: 1px solid #aaa;
text-align: right;
width: 100%;
outline: 0;
border: 0;
box-sizing: border-box;
font-size: 30px;
height: 44px;
line-height: 44px;
}
.keyboard {
width: 100%;
.key-row {
display: flex;
display: -webkit-flex;
position: relative;
height: 88px;
line-height: 88px;
}
.key-row::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #d5d5d6;
color: #d5d5d6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.key-cell {
flex: 1;
-webkit-box-flex: 1;
text-align: center;
position: relative;
font-size: 40px;
}
.key-cell::after {
content: '';
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
height: 200%;
border-right: 1px solid #d5d5d6;
color: #d5d5d6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.key-cell:nth-last-child(1)::after {
border-right: 0;
}
.disabled {
/*background: rgba(0, 0, 0, 0.2);*/
}
.key-confirm {
position: absolute;
text-align: center;
height: 264px;
width: 25%;
line-height: 264px;
background: #00a0dc;
color: #fff;
z-index: 5;
right: 0;
bottom: 0;
font-size: 40px;
}
}
</style>
组件内容完成之后，就可以在页面引入并且使用 以下是在页面中如何使用的步骤 重要的地方会有相应的备注
- 引入组件
import KeyBoard from '@/components/KeyBoard.vue'; //引入自定义键盘组件
components: {
KeyBoard
},
- 页面调用
<key-board @getCount="getCount" :num="number" :keyBoard="keyBoard"></key-board>
- 组件传值
showKey(){
this.keyBoard = true //点击弹出自定义键盘
},
getCount(val){
this.number = val //获取到输入的值
this.keyBoard = false //隐藏键盘
},
- 整个页面代码参考
<template>
<div class="wrap wrap-keyboard">
<span @click="showKey">点击{{number}}</span>
<key-board @getCount="getCount" :num="number" :keyBoard="keyBoard"></key-board>
</div>
</template>
<script>
import KeyBoard from '@/components/KeyBoard.vue'; //引入自定义键盘组件
export default {
components: {
KeyBoard,
},
data() {
return {
number:0, //输入框的数字
keyBoard:false //键盘是否显示
};
},
methods: {
showKey(){
this.keyBoard = true //点击弹出自定义键盘
},
getCount(val){
this.number = val //获取到输入的值
this.keyBoard = false //隐藏键盘
},
},
onShow() {
},
};
</script>
<style lang="scss">
.wrap-keyboard {
}
</style>
