前言

这是一个最近的一个来自于朋友的需求, 

然后做了一个 基于 uqrcodejs 来生成 二维码的一个 demo

 

package.json 中增加以依赖

"uqrcodejs": "^4.0.7",

 

 

测试用例 

<template>
  <div class="hello">
    <canvas id="qrcode" canvas-id="qrcode" ref="qrcode" style="width: 200px;height: 200px;"></canvas>
  </div>
</template>

<script>
import UQRCode from 'uqrcodejs';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    const canvas = this.$refs.qrcode;
    var canvasContext = canvas.getContext('2d');

    var qr = new UQRCode();
    qr.data = "https://uqrcode.cn/doc";
    qr.size = 200;
    qr.make();
    qr.canvasContext = canvasContext;
    qr.drawCanvas();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

 

 

问题效果

生成出来的二维码信息如下  

 

 

 

 

完