扫码枪【1】: vue中扫码枪的运用

扫码枪

一、扫码枪是干什么的？

1. 顾名思义，它是来扫二维码的，如下所示，扫码枪连接电脑，把二维码的信息读出条码自动在【input】里生成一串信息。

   
   image.png

二、扫码枪做了什么事？

1. 扫码枪: 一般是要鼠标【聚焦到input】后，扫码枪，做了两步事

 1、输入号码
 2、点击了键盘的回车事件 

三、前端如何做？

1. 首先要让【input】框自动聚焦，话不多说，直接上代码，【html】中如下：

<template>
    <Input ref="inputdata" size="large" placeholder="请输入优惠券码 / 扫描优惠券码" 
      search enter-button="查询" style="ime-mode:active" 
      v-model="code" @blur="inputblur()" @keyup.enter.native="getDetail"
      @on-search="search" @compositionstart.native="compositionstart" />
</template>

export default {
   data () {
        return {
            code: '',    // 扫码枪扫码出来的信息
        }
   }，
    created () {
        // 初始让 input 框获取焦点
        this.keyPress();
    },
    methods: {
        // 初始获取焦点
        keyPress () {
            // nextTick 针对 DOM 没有渲染出现Undefined问题
            this.$nextTick(() => {
                this.$refs.inputdata.focus()
            })
        },
      // 枪扫条码扫出来的总是少一位数,需要输入法要切换到英文状态。
        compositionstart () {
            this.$Message.error({
                background: true,
                content: '输入法需切换到英文状态下 !',
                duration: 5
            });
            this.isPinyin = true;
        },
        // 失去焦点
        inputblur () {
            // FireFox 和 IE 失去焦点，blur直接执行focus 不会生效，加个延时
            setTimeout(() => {
                this.$refs.inputdata.focus()
            }, 10)
        },
        search () {
            if (!this.code.trim()) {
                this.$Message.error({
                    background: true,
                    content: '券码编号不能为空 ！',
                    duration: 2
                });
                return false;
            }
            if (this.code.length < 22) {
                this.$Message.error({
                    background: true,
                    content: '优惠券码最小长度为22位 ！',
                    duration: 5
                });
                return false;
            }
            this.getDetail();
        },
    }
}

四、注意事项

1. 友好操作，input 需要聚焦。
2. 扫码枪需要英文输入法下扫出来的码信息是完整不会少位数的。（这个可以加提示）
1. 扫码枪：https://www.jianshu.com/p/04fe10d4da8d
问题：https://wenwen.sogou.com/z/q708356376.htm