vue实现扫码枪监听

<script>
export default {data() {return {}},mounted() {// 监听按键var code = ''var lastTime, nextTime // 上次时间、最新时间var lastCode, nextCode // 上次按键、最新按键document.onkeypress = (e) => {// 获取按键if (window.event) { // IEnextCode = e.keyCode} else if (e.which) { // Netscape/Firefox/OperanextCode = e.which}// 如果触发了回车事件(扫码结束时间)if (nextCode === 13) {if (code.length < 3) return // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有this.codeFind(code) // 获取到扫码枪输入的内容，做别的操作code = ''lastCode = ''lastTime = ''return}nextTime = new Date().getTime() // 记录最新时间if (!lastTime && !lastCode) { // 如果上次时间和上次按键为空code += e.key // 执行叠加操作}// 如果有上次时间及上次按键if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失code = e.key} else if (lastCode && lastTime) {code += e.key}lastCode = nextCodelastTime = nextTime}},methods: {// 业务逻辑根据项目更改codeFind(code) {if ([123456, 789101].indexOf(code) >= 0) {alert('code已经存在')}}}
}
</script>

vue实现扫码枪监听相关推荐

vue，watch监听数据，数据监听
vue,watch监听数据,数据监听三个值: 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep:其值是true或false:确认是否深入监听.(一般 ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
vue/xx/事件监听，按键与键码值
vue中的事件监听 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
VUE 2 无法监听数组和对象的某些变化
一.数组 1. 不能监听的情况 (1) 直接通过下标赋值 arr[i] = value (2) 直接修改数组长度 arr.length = newLen 2. 替代做法 (1)修改值 1. Vu ...
vue里面watch监听当前路由信息
vue里面watch监听当前路由信息开发中有这么个小需求,就是重复路由不触发生命周期监听路由触发初始化方法 watch: {'$route': function () {this.init()}} ...
vue用watch监听对象，打印oldValue和newValue相同的问题
vue用watch监听对象,打印oldValue和newValue相同的问题背景做节目设计器时候,当组件超出限制大小时,需要回滚此次操作,但是数据没有备份,拿不到旧数据.因此在watch中监听变化 ...
vue 键盘事件监听
原文链接: vue 键盘事件监听上一篇: 使用环形队列触发延时任务下一篇: vue 一次失败的dom游戏制作参考 https://cn.vuejs.org/v2/guide/events.htm ...
vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
Vue使用watch监听一个对象中的属性
问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: {name: '',creator: '',selectedStatus ...

vue实现扫码枪监听

vue实现扫码枪监听相关推荐

最新文章

热门文章