自定义数字键盘组件

自定义数字键盘组件-https://www.cnblogs.com/liangtao999/p/12695194.html
 

<template>
    <view v-if="enteringIsShow">
        <view class="con-backdrop">
            <!-- <view class="view-backdrop uni-ellipsis">{{ChangeNum}}</view> -->
            <view class="dis-flex justify-between">
                <view class="lf" style="width: 80%;">
                    <view class="num dis-flex justify-between">
                        <view class="lia" @tap="Compute('1')">1</view>
                        <view class="lia" @tap="Compute('2')">2</view>
                        <view class="lia" @tap="Compute('3')">3</view>
                    </view>
                    <view class="num dis-flex justify-between">
                        <view class="lia" @tap="Compute('4')">4</view>
                        <view class="lia" @tap="Compute('5')">5</view>
                        <view class="lia" @tap="Compute('6')">6</view>
                    </view>
                    <view class="num dis-flex justify-between">
                        <view class="lia" @tap="Compute('7')">7</view>
                        <view class="lia" @tap="Compute('8')">8</view>
                        <view class="lia" @tap="Compute('9')">9</view>
                    </view>
                    <view class="num dis-flex justify-between">
                        <view class="lia" style="width: 66%;" @tap="Compute('0')">0</view>
                        <view class="lia" @tap="Compute('.')">.</view>
                    </view>
                </view>
                <view class="ri">
                    <view class="num dis-flex" style="justify-content: flex-end;">
                        <view class="lia" @tap="Compute('delete')"><image src="../../../static/images/cha.png" mode=""></image></view>
                    </view>
                    <view class="num dis-flex" style="justify-content: flex-end;">
                        <view class="lia cz" @tap="Compute('ok')">充值</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                entering: '',
                isFirstRender: true
            }
        },
        props: {
            enteringIsShow: {
                type: Boolean,
                default: true
            },
            fontSize: {
                type: String,
                default: "20px"
            },
            isminus: {
                type: String,
                default: "0"
            },
            inputname: {
                type: String,
                default: ""
            },
            passNum: {
                type: String,
                default: ""
            }
        },
        computed: {
            ChangeNum() {
                this.isFirstRender ? this.entering = this.passNum : null
                return this.entering
            }
        },
        methods: {
            Compute(e) {
                this.isFirstRender = false
                if (e == 'ok') {
                    //确认
                    if ((this.entering.length == 1 && (this.entering[0] == '+' || this.entering[0] == '-')) || this.entering.substring(
                            this.entering.length - 1) == ".") {
                        return
                    }
                    this.$emit('submit', this.entering);
                    // this.isFirstRender = true;
                } else if (e == 'delete') {
                    //退格
                    this.entering = this.entering.substring(0, this.entering.length - 1);
                    this.$emit('NumValue', this.entering);
                } else if (e == '+' || e == '-') {
                    //正负号
                    this.entering[0] != '+' && this.entering[0] != '-' ? this.entering = e + this.entering : this.entering = this.entering
                        .substr(0, 0) + e + this.entering.substr(1)
                } else if (e == '.') {
                    //小数点
                    let temBoolean = true;
                    for (let i = 0; i < this.entering.length; i++) {
                        this.entering[i] == '.' ? temBoolean = false : null
                    }
                    this.entering.length == 0 || (this.entering.length == 1 && this.entering[0] == '+') || (this.entering.length == 1 &&
                            this.entering[0] == '-') ? temBoolean = false : null,
                        temBoolean ? this.entering += e : null
                    this.$emit('NumValue', this.entering);
                } else if (e == 'clear') {
                    //清空
                    this.entering = ''
                } else {
                    //数字
                    if (e == "0" && this.entering.length == 0) //首位是0
                    {
                        this.entering = this.entering + "0.";
                    } else {
                        this.entering += e;
                    }

                    if (this.isminus == '1' && this.entering[0] != "+" && this.entering[0] != "-") { //默认是负数
                        this.entering = "-" + this.entering;
                    }
                    this.$emit('NumValue', this.entering);
                }

            },
        }
    }
</script>

<style lang="scss" scoped>
    /* 数字键盘弹出 */
    .backdrop {
        width: 100%;
        height: 100%;
        background: #333;
        opacity: 0.5;
        z-index: 998;
    }

    .delete {
        width: 100%;
        height: 120px;
        line-height: 120px;
        text-align: center;
        position: absolute;
        top: 100%;
    }

    .delete image {
        width: 40px;
        height: 40px;
        vertical-align: middle;
    }

    .con-backdrop {
        width: 100%;
    }

    .btnBox {
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .btn-backdrop {
        width: 23%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 6px;
        border: solid 1px #eee;
        cursor: pointer;
    }

    .btn-backdrop:hover {
        background: #efefef;
    }

    .view-backdrop {
        width: 90%;
        height: 40px;
        line-height: 40px;
        text-align: right;
        font-size: 25px;
        padding: 5px 15px;
    }

    .color-blue {
        color: #fff;
        background: #0078ff;
    }

    /* 文本溢出隐藏 */
    .uni-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .num{
            margin-top: 15rpx;
            .lia{
                height: 80rpx;
                line-height: 80rpx;
                background-color: #FFFFFF;
                border-radius: 10rpx;
                font-size: 40rpx;
                text-align: center;
                font-weight: bold;
            }
        }
        .lf{
            width: 80%;
            .lia{
                width: 32%;
            }
        }
        .ri{
            width: 20%;
            .lia{
                width: 90%;
            }
            image{
                width: 40rpx;
                height: 28rpx;
            }
            .cz{
                height: 270rpx;
                line-height: 270rpx;
                background-color: #7bc20d;
                color: #FFFFFF;
                font-size: 30rpx;
                font-weight: initial;
            }
        }
</style>
 

使用

        <NumKeypad  fontSize="20px" :passNum="numValue"  @NumValue="GetNumValue" @submit="payHandle"></NumKeypad>
        
    import NumKeypad from "./components/NumKeyPad.vue"; 
        components:{
            NumKeypad
        },
        data() {
            return {
                moneyVal:'',
                code:'',
                winUrl:'',
            }
        },

      methods:{
            payHandle(){
                console.log(this.moneyVal)
            },
            GetNumValue(value) {
                this.moneyVal = value
            }    

      }