自定义键盘

<template>
    <view class="">
        <uni-popup ref="popup" @maskClick="maskClick">
            <view class="board">
                <view class="board_text">自定义条码键盘</view>
                <view class="board_work" :class="Input_data?'':'data_color'">
                    {{Input_data?Input_data:'请输入条码'}}
                </view>
                <view class="plagflex boa_rd">
                    <view class="fing_er size16" v-for="(item, index) in boardArr" :key="index">
                        <view class="" @click="board_input(item)">
                            {{item.name}}
                        </view>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                Input_data: '',
                boardArr: [{
                    name: '1',
                    value: '1'
                }, {
                    name: '2',
                    value: '2',
                }, {
                    name: '3',
                    value: '3',
                }, {
                    name: '扫码',
                    value: 'scan',
                }, {
                    name: '4',
                    value: '4',
                }, {
                    name: '5',
                    value: '5',
                }, {
                    name: '6',
                    value: '6',
                }, {
                    name: '删除',
                    value: 'delete',
                }, {
                    name: '7',
                    value: '7',
                }, {
                    name: '8',
                    value: '8',
                }, {
                    name: '9',
                    value: '9',
                }, {
                    name: '清空',
                    value: 'empty',
                }, {
                    name: '69',
                    value: '69',
                }, {
                    name: '0',
                    value: '0',
                }, {
                    name: '确定',
                    value: 'define',
                }],
            }
        },
        onShow() {
            // this.$refs.popup.open('center')
        },
        methods: {
            maskClick() {
                this.Input_data = ''
            },
            // 打开弹窗
            toggle(type) {
                this.searchKey = ''
                this.$refs.popup.open(type)
            },
            board_input(item) {
                switch (item.value) {
                    case 'scan':
                        var _this = this
                        uni.scanCode({
                            scanType: ['barCode'],
                            // 是否支持手动输入条形码  仅飞书小程序（V3.14.0）支持
                            barCodeInput: true,
                            success: function(res) {
                                _this.Input_data = res.result
                            }
                        });
                        break;
                    case 'delete':
                        this.Input_data = this.Input_data.slice(0, this.Input_data.length - 1);
                        break;
                    case 'empty':
                        this.Input_data = ''
                        break;
                    case 'define':
                        this.$emit("fingerboard", this.Input_data)
                        this.$refs.popup.close()
                        this.Input_data = ''
                        break;
                    default:
                        this.Input_data += item.value
                        break;
                }
            }
        },
    }
</script>
<style lang="scss">
    // .content {
    // background-color: #f2f2f2;
    // position: absolute;
    // top: 0px;
    // left: 0px;
    // right: 0px;
    // min-height: 100%;

    .uni-popup .uni-popup__wrapper.data-v-7c43d41b {
        width: 100%;
    }

    .board {
        width: 96%;
        margin: 0px 1.5%;
        padding: 2px 0px 5px;
        border: 1px solid #e2e7eb;
        background-color: #eaeff5;
        border-radius: 10px;

        .board_text {
            line-height: 30px;
            text-align: center;
            color: #989898;
        }

        .data_color {
            color: #cccccc;
        }

        .board_work {
            width: 98%;
            margin: 0px 1%;
            background-color: #fff;
            line-height: 30px;
            border-radius: 5px;
            text-align: center;
        }

        .boa_rd {
            width: 94%;
            margin: 0px 3%;
            flex-wrap: wrap;
            border-radius: 5px;
            padding: .5%;

            .fing_er {
                font-weight: 600;
                background-color: #fff;
                width: 22%;
                margin: 1%;
                border-radius: 7px;
                text-align: center;
                line-height: 50px;
                box-shadow: 1px 1px 1px 1px #e2e7eb;
            }
        }
    }

    // }

    .board .boa_rd .fing_er:nth-child(4) {
        background-color: #2e83fa;
        width: 26%;
        font-weight: 500;
    }

    .board .boa_rd .fing_er:nth-child(8) {
        background-color: #fea503;
        width: 26%;
        font-weight: 500;
    }

    .board .boa_rd .fing_er:nth-child(12) {
        background-color: #f46c6c;
        width: 26%;
        font-weight: 500;
    }

    .board .boa_rd .fing_er:nth-child(14) {
        width: 46%;
    }

    .board .boa_rd .fing_er:nth-child(15) {

        background-color: #30bdea;
        width: 26%;
        font-weight: 500;
    }
</style>

调用

<fingerboard @fingerboard="fingerboard" ref='finger'></fingerboard>


import fingerboard from "../../components/fingerboard.vue"

接收数据

//接收数据
fingerboard(e) {
    this.billno = e
    this.iconClick()
},
//调用打开弹窗
figboard() {
    this.$refs.finger.toggle('center')
},