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
     });
  },

  

posted @   福超  阅读(722)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示