vue有两种生成二维码的方式，qrcode、vue-qr（有icon）

1、qrcode

1）、安装依赖

npm i qrcodejs2 --save

2）、示例代码

<template>
    <div style="margin: 20px;">
        <div style="text-align: left;margin-bottom: 20px;">
            <el-button @click="creatQrCode">生成二维码</el-button>
        </div>
        <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2'
    export default {
        name: 'QrCodePage',
        data() {
            return {
                qrcode: null,
            }
        },
        mounted() {
            // this.creatQrCode()
        },
        methods: {
            creatQrCode() {
                this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
                    text: 'https://www.shenmazong.com/blog/1578710369202851840', // 需要转换为二维码的内容
                    width: 100,
                    height: 100,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            },
        }
    }
</script>

<style>
</style>

3）、效果图

2、vue-qr

1）、安装依赖

npm i vue-qr --save

2）、示例代码

<template>
    <div style="margin: 20px;">
        <div style="margin-bottom: 20px;">
            <el-button @click="creatQrCode">生成二维码</el-button>
        </div>
        <div>
            <vue-qr :logoSrc="imageUrl" text="https://www.shenmazong.com/blog/1578710369202851840" :size="200"></vue-qr>
        </div>
    </div>
</template>

<script>
    import vueQr from "vue-qr"; //引入二维码生成组件
    export default {
        name: 'QrCodePage',
        components: {
            vueQr
        },
        data() {
            return {
                // logo 图片地址
                imageUrl: require("../assets/logo.png"),
            }
        },
        mounted() {
        },
        methods: {
            creatQrCode() {

            },
        }
    }
</script>

<style>
</style>

3）、运行效果

参考文章

• 【vue】生成二维码
• Vue生成二维码Qrcode，可插入二维码中心logo图标