方式一：vue-qr

1.安装

npm install vue-qr --save

2.引用

import vueQr from 'vue-qr'

3.使用

// logoSrc为logo的url地址(使用require的方式)；text为需要转换为二维码的内容
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
  
<script>
    export default {
        name: "qecode",
        data() {
            return {
                imageUrl: require("../assets/logo.png"),
            }
        },
        components: {
            vueQr
        },
    },
}
</script>

方式二：qrcode

1.安装

npm install --save qrcodejs2

2.引用 

import QRCode from 'qrcodejs2'

3.使用

<div class="qrcode" ref="qrCodeUrl"></div>
  
<script>
methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
</script>
样式（这里提供一个给二维码添加边框的小技巧：如下图所示，我们生成的二维码是没有边框的）
 
就有了下面的效果：

https://www.jb51.net/article/202493.htm

您已经阅读00:00:00欢迎留言评论，喜欢的话就为作者点个赞或者赏颗糖吧！ 分享