解决：扫描枪 input 输入框因为输入法中英文导致的问题

项目：VUE框架、element-ui

项目需求：需要使用扫描枪去扫描二维码进行查询核销，因为核销码是数组字母随机组合，在使用中文输入法的情况下会产生汉字等丢失字符（因为扫描枪相当于键盘键入事件）

解决：采用 input 的 password 密码框可以解决输入法中英文问题，但是无法明文显示，所以使用另一个正常且无边框的 input 遮挡住密码框的非明文部分，然后两个输入框采用双向绑定。

因为核销码是数字字母随机组合的八位数字，所以我们举例，随机核销码为：dh2u1ye78

当扫描枪扫描该二维码后，如果输入法是中文，相当于键盘一次敲击dh2u1ye78 然后在按一个回车键确认，最后结果如下图所示：

 为了避免上述问题，所以最后采用了input 的 password 密码框解决该问题

 下述代码为当时候场景使用的结构和样式：

<div class="top">
    <el-form-item label="核销码：" class="inputbox">
        <el-input v-model="input" @keyup.enter="codelist()" type="password" placeholder="请输入核销码" clearable  style="width: 300px"/>
        <div class="inputboxs">{{ input }}<input class="inputself" type="text" v-model="input"></div>
    </el-form-item>
    <div @click="codelist()" class="chaxun">查询</div>
</div>

<style lang='scss' scoped>
    .top{
        height: 120px;
        background-color: #fff;
        margin-bottom: 10px;
    }

    .inputbox{
        margin-left: 700px;
        display: flex;
        align-items: center;
    }

    .inputboxs{
        min-width: 1px;
        height: 20px;
        position: absolute;
        left: 0;
        color: #fff;
    }

    .inputself{
        width: 100%;
        height: 25px;
        position: absolute;
        left: 6px;
        top: -5px;
        border: 0;
        outline: none;
        padding-top: 4px;
    }
</style>