利用VUE生成二维码

一. qrcode

1.安装

npm i qrcodejs2 --save

2.在自己所需页面引入

import QRCode from 'qrcodejs2'

3.HTML

<div class="QRcode" ref="qrCodeUrl">
</div>

4.JS

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  mounted() {
    this.creatQrCode();
   },
  methods: {
         creatQrCode() {
        console.log(this.$refs.qrCodeUrl)
        this.$nextTick(()=>{
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'https://blog.csdn.net/m0_58565372', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',//二维码颜色
            colorLight: '#ffffff',//二维码背景色
            correctLevel: QRCode.CorrectLevel.H, //容错率，L/M/H
          })
        })
 
      },
};
script>

 5.效果图

 二. vue-qr

1.安装

npm i vue-qr --save

2.在自己所需要的页面引入

import vueQr from 'vue-qr'

3.HTML

 :logoSrc="imageUrl" text='https://blog.csdn.net/m0_58565372':size="200">

4.JS

<script>
 import vueQr from 'vue-qr'//就是在这个地方引入
    export default {
        name: "qecode",
        components: {
            vueQr
        },
        data() {
            return {
                imageUrl: require("../img/logo.png"),//icon路径
            }
        },
      
    },
}
script>

5.效果图

 

这个方法适合二维码里面带logo的，如果没有logo，可以imageUrl写成imageUrl:""。

效果图就是

以上两种方法就能实现生成二维码，其中第二个引入的时候可能会报错，我也有写解决方法，具体解决方法可以看这篇文章。

使用vue-qr， 引入时报错You may need an appropriate loader to handle this file type. 问题