扫码枪
一、扫码枪是干什么的？
-
顾名思义，它是来扫二维码的，如下所示，扫码枪连接电脑，把二维码的信息读出条码自动在【input】里生成一串信息。
image.png
二、扫码枪做了什么事？
- 扫码枪: 一般是要鼠标【聚焦到input】后，扫码枪，做了两步事
1、输入号码
2、点击了键盘的回车事件
三、前端如何做？
- 首先要让【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
