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

扫描结果：

安装：

npm install qrcodejs2 --save

页面使用：

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

 <el-button size="mini" class="green-btn" style="width:90px" @click="qrCode">生成二维码</el-button>


      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <div id="qrcode"></div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

 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字段如果内容过多将会无法识别