vue2扫码枪串口模式的使用
1.下载依赖包 serialport
1 | npm i serialport |
2.创建文件code-gun.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | var { SerialPort } = require( "serialport" ); // 串口列表 SerialPort.list() .then((ports) => { ports.forEach((port) => { console.log(port); }); }) . catch ((err) => { console.error( "无法获取串口列表" , err); }); const codeGun = { entity: null , isOpen: false , error: null , data: null , }; codeGun.init = function (option, callback) { codeGun.entity && typeof codeGun.entity.close === "function" && codeGun.entity.close(); codeGun.entity = new SerialPort(option); console.log(codeGun.entity) //连接串口后进行写入指令操作 codeGun.entity.open( function (err) { if (!err) { console.log( "扫码枪连接ok" ); codeGun.isOpen = codeGun.entity.isOpen; } else { console.log( "扫码枪连接失败!" ); console.log(err); } }); // close codeGun.entity.on( "close" , function () { codeGun.isOpen = codeGun.entity.isOpen; }); // //指令监听 codeGun.entity.on( "data" , function (data) { let str = new String(data); console.log(str) codeGun.data = str.toString(); typeof callback === "function" && callback(); }); // //错误监听 codeGun.entity.on( "error" , function (error) { console.log( "error: " + error); }); return codeGun; }; codeGun.close = function () { codeGun.isOpen = false ; codeGun.entity && codeGun.entity.close(); }; export default codeGun; |
3.App.vue 初始化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import codeGun from "@/utils/code-gun" data(){ return { codeScanGun: { data: null , isOpen: false , timer: null , } } }, watch: { "codeScanGun.data" : { handler: function (val) { if (val) { // 设置当前focus的input元素的值 let activeElement = document.activeElement; if (activeElement.tagName.toUpperCase() === 'INPUT' ) { activeElement.value = val // 手动触发input事件,实现数据绑定 let event = new InputEvent( 'input' , { bubbles: true }) activeElement.dispatchEvent(event); } this .$nextTick(() => { // 重置扫码枪的值 this .codeScanGun.data = "" }) } } }, "codeScanGun.isOpen" : { handler: function (val) { if (!val) { console.log( "扫码枪断开连接!" ) this .timer && clearInterval( this .timer) this .timer = setInterval(()=>{ this .initSMQ() },2000) } else { this .timer && clearInterval( this .timer) } } } }, created(){ this .codeScanGun = codeGun.init({ path: "com1" , //串口号 baudRate:9600, //波特率 autoOpen: false }); }, |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!