vue前端生成二维码图片插件--qrcodejs2

扫描结果：

安装：

npm install qrcodejs2 --save

页面使用：

import QRCode from "qrcodejs2"; // 引入qrcode

 生成二维码


      
          

          
            取 消
            确 定
          
        

 qrCode() {
      this.dialogVisible = true;
      this.$nextTick(function() {
        document.getElementById("qrcode").innerHTML = "";
        let qrcode = new QRCode("qrcode", {
          width: 132,
          height: 132,
          text: "此处为二维码的内容", // 二维码内容 也可以放url
          colorDark: "#000",
          colorLight: "#fff"
        });
      });

添加白边样式：

#qrcode {
  display: inline-block;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
  }
}

 

缺点：text字段如果内容过多将会无法识别