【vue】 扫码枪原理

2022-01-13  本文已影响0人  吃肉肉不吃肉肉

原理:扫码枪会将扫到的数据带入到获取焦点的输入框中,并且触发输入框的enter回车事件

<input
    type="text"
    class="qrcode-text"
    ref="qrcode_text"
    v-model="qrcode"
    @focus="preventKeyBord"
    @blur="onBlur"
    @input="onInput"
/>

获取焦点:

// 在元素失去焦点时触发,获取焦点
onBlur() {
    this.$nextTick(() => {
        this.$refs.qrcode_text.focus()
    })
},
// 监听input的输入值, 这里可以拿到二维码信息
onInput(e) {
    console.log(e.target.value)
}
// 获取input 焦点事件 (失去焦点,再次获取焦点时触发)
preventKeyBord(e) {
    console.log(e.target.value)
}
上一篇 下一篇

猜你喜欢

热点阅读