自定義的數(shù)字鍵盤
鑒于使用系統(tǒng)自帶輸入鍵盤會造成擠壓頁面等問題，同時也不能滿足設(shè)計需求，因此自己去寫了個鍵盤組件。
效果如下：
由于是寫鍵盤組件的使用 所以頁面也沒有過多的樣式 大家見諒.
效果圖.png
效果圖已貼上，下面就直接貼代碼了
首先在組件component目錄下新建.vue頁面 例如：keyboard.vue
代碼內(nèi)容如下：
<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="請輸入數(shù)量" 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'>確認(rèn)</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)) {
//小數(shù)點
case '.':
this._handleDecimalPoint();
break;
//刪除鍵
case 'D':
this._handleDeleteKey();
break;
//清空鍵
case 'C':
this._handleClearKey();
break;
//確認(rèn)鍵
case 'S':
this._handleConfirmKey();
break;
default:
this._handleNumberKey(num);
break;
}
},
//處理小數(shù)點函數(shù)
_handleDecimalPoint() {
let S = this.count.toString();
//如果包含小數(shù)點，直接返回
if (S.indexOf('.') > -1) {
return false;
}
//如果小數(shù)點是第一位，補0
if (!S.length) {
this.count = '0.';
}//如果不是，添加一個小數(shù)點
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 = '';
},
//處理數(shù)字
_handleNumberKey(num) {
let S = this.count.toString();
//如果有小數(shù)點且小數(shù)點位數(shù)不小于2
if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2) {
this.count = S + num;
}
//沒有小數(shù)點
if (!(S.indexOf('.') > -1)) {
//如果第一位是0，只能輸入小數(shù)點
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>
組件內(nèi)容完成之后，就可以在頁面引入并且使用 以下是在頁面中如何使用的步驟 重要的地方會有相應(yīng)的備注
- 引入組件
import KeyBoard from '@/components/KeyBoard.vue'; //引入自定義鍵盤組件
components: {
KeyBoard
},
- 頁面調(diào)用
<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, //輸入框的數(shù)字
keyBoard:false //鍵盤是否顯示
};
},
methods: {
showKey(){
this.keyBoard = true //點擊彈出自定義鍵盤
},
getCount(val){
this.number = val //獲取到輸入的值
this.keyBoard = false //隱藏鍵盤
},
},
onShow() {
},
};
</script>
<style lang="scss">
.wrap-keyboard {
}
</style>
