扫描结果:

安装:

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

Logo

前往低代码交流专区

更多推荐