阅读数:151 评论数:0

一、概述

vue有两种生成二维码的方式：qrcode、vue-qr(有icon)

二、qrcode

1、安装和引入

npm install --save qrcodejs2
//所需页面导入
import QRCode from 'qrcodejs2'

2、具体页面

<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://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
};
</script>

3、我们还可以使用以下方法

qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

4、qrcode参数说明

在dialog弹窗里生成二维码，可以用nextTick()函数，等到DOM更新之后再执行代码。

//this.$nextTick()nextTick(()=>{
            document.getElementById("qr").innerHTML = '';
            new QRCode('qr', {
                  text: formData.value.pbid,
                        width: 50,
                        height: 50,
                        colorDark: '#000000',    //二维码颜色
                        colorLight: "#ffffff"    //背景颜色
                });
                
        });

三、vue-qr

vue-qr可以生成带logo图片的二维码。

1、安装插件 

npm install vue-qr --save

2、引用方式

// vue2.0
import VueQr from 'vue-qr'
 
// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {VueQr}
}

<el-form style="text-align:center">
    <div class="dialog-footer"  >{{gameInfo.name}}:{{gameInfo.code}}</div>
    <vue-qr
        :text='contentValue' //二维码内容
        :logoSrc='logoSrc' //logo
        :logoScale = 0.2 //logo大小
        :margin = 10
    ></vue-qr>
</el-form>

3、参数