l***@126.com
l***@126.com
  • 发布:2023-03-27 13:47
  • 更新:2023-03-27 13:47
  • 阅读:240

uni-easyinput 组件如何接收pda扫码后通过键盘方式输入的值?

分类:uni-app

现在用下面代码实现的输入框去接收PDA扫码后的值,会出现值在输入框显示完整,但是传递给后端的值是不完整的。

<template>    
    <view class="container">    
        <title-tip :showIf=showErrMsg :msg="this.msg"></title-tip>    
        <view class="form">    
            <uni-forms ref="form" :model="form" labelWidth="70px">    
                <uni-row :gutter="10">    
                    <uni-col :span="14">    
                        <uni-forms-item label="标签" label-width="75px" name="outerBoxLabelEx">    
                            <uni-easyinput id="myOuterInput" v-model="form.outerBoxLabelEx" placeholder=""    
                                @confirm="input($event)" :focus="isOuterFocus" />    
                            <!-- <input ref="testBinderCode" v-model="form.outerBoxLabelEx" :focus="isOuterFocus" @confirm="input($event)" class="input" /> -->    
                        </uni-forms-item>    
                    </uni-col>    
                </uni-row>    
            </uni-forms>    
        </view>    
        <view class="table">    
            <uni-table ref="table" :border="true" :loading="loading" emptyText="暂无更多数据" type="selection"    
                @selection-change="selectionChange">    
                <uni-tr>    
                    <uni-th width="95" align="center">标签</uni-th>    
                </uni-tr>    
                <uni-tr v-for="(item, index) in outerBoxLabelList" :key="index">    
                    <uni-td>{{ item.outerBoxLabel }}</uni-td>    
                </uni-tr>    
            </uni-table>    
        </view>    
        <!-- <view class="box">    
            <scanCode @setData="getScanCode"></scanCode>    
        </view> -->    
    </view>    
</template>    

<script>    
    import {    
        getLabel,    
        getBoxLabelInfo,    
        unBindingBoxLabel,    
        bindTray    
    } from "@/api/label/trayLabel"    
    import {    
        setTimeout    
    } from "timers";    

    export default {    
        data() {    
            return {    
                msg: null,    
                showErrMsg: false,    
                form: {    
                    outerBoxLabelEx: null,    
                },    
                /**控制绑定按钮*/    
                bindingButton: false,    
                loading: false,    
                outerBoxLabelList: [],    
                // 数据总量    
                total: 0,    
                // 每页数据量    
                pageSize: 10,    
                // 当前页    
                pageNum: 1,    
                // 外箱标签获取焦点    
                isOuterFocus: false,    

            }    
        },    
        onLoad() {    
            this.selectedIndexs = [];    
        },    
        methods: {    
            /**多选处理*/    
            selectedItems() {    
                return this.selectedIndexs.map(i => this.outerBoxLabelList[i])    
            },    
            /**多选*/    
            selectionChange(e) {    
                this.selectedIndexs = e.detail.index;    
            },    
            inputTest(e) {    
                setTimeout(() => {    
                    const labelInfo = {};    
                    labelInfo.outerBoxLabel = e.target.value;    
                    this.outerBoxLabelList.push(labelInfo);    
                    // 设为空,重新赋予焦点    
                    this.form.outerBoxLabelEx = null;    
                    this.isOuterFocus = false;    
                    var that = this;    
                    setTimeout(() => {    
                        that.$nextTick(function() {    
                            this.isOuterFocus = true;    
                        });    
                    }, 300)    
                }, 300)    
            },    
            resetForm() {    
                this.form = {    
                    outerBoxLabelListEx: [],    
                };    
                this.outerBoxLabelList = [];    
                //清除之前的选中状态    
                this.$refs.table.clearSelection();    
                // 初始化已选集合    
                this.selectedIndexs = [];    
                this.showErrMsg = false;    
            },    
        }    
    }    
</script>    

<style lang="scss" scoped>    
    page {    
        height: 100%;    
        background-color: #ffffff;    
    }    

    .container {    
        width: 100%;    
        height: 100%;    
        background-color: #fff;    
    }    

    .form {    
        padding: 10px;    
    }    

    .tray-box-button {    
        padding: 10px;    
    }    

    .form-submit {    
        margin-left: 6px;    
        margin-top: 4px;    
    }    

    /deep/.uni-forms-item__label {    
        padding: 0 4px 0 8px;    
    }    

    // !important 解决样式被element.style 覆盖    
    .uni-table-th {    
        padding: 6px 5px;    
        font-size: 12px;    
    }    

    .uni-table-td {    
        padding: 8px 6px;    
        font-size: 13px;    
    }    
</style>  
2023-03-27 13:47 负责人:无 分享
已邀请:

要回复问题请先登录注册