vue生成二维码

vue可以使用qrcodejs2生成二维码

1、安装

npm  install --save qrcodejs2
2、引入

在要使用的页面引入，全局引入可能会报错
import qrCode from 'qrcodejs2'

3、使用

//在这个div中生成二维码
<div class="qrcode" ref="qrCodeUrl"></div>

<script>
import qrCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
    creatQrCode() {
        var qrcode = new qrCode(this.$refs.qrCodeUrl, {
            text: 'https://www.baidu.com/', // 需要转换为二维码的内容
            width: 300,                     //宽
            height: 300,                    //高
            colorDark: '#000000',           //颜色
            colorLight: '#ffffff',          //背景色
            correctLevel: qrCode.CorrectLevel.H Fault tolerance, //L/M/H
        })
    },
  },
  mounted() {
     this.creatQrCode();
  },
};
</script>

4、效果