封装动态生成二维码组件

1.封装一个根据内容动态生成二维码的组件

2.效果图如下

3.实现方式有多种展示两种

•  使用 QRCode 插件
• 使用 vue-qr 插件

4.组件API

 1. logoSrc设置二维码中心logo 

4.组件API

5.组件代码

•  QRCode

<template>
    <div class="count-to-wrapper">
        <div ref="canvasWrapper" id="canvasWrapper"></div>
    </div>
</template>
  
<script>
import QRCode from 'qrcode'
export default {
    name: 'QRCode',
    props: {
        value: {
            type: String,
            default: ''
        },
        size: {
            type: Number,
            default: ''
        },  
        errorCorrectionLevel: {
            type: String,
            default: 'L'
        },
        colorDark: {
            type: String,
            default: '#000000'
        },
        colorLight: {
            type: String,
            default: '#ffffff'
        },
        margin: {
            type: String,
            default: '1'
        },
        // logoImage: {
        //     type: String,
        //     default: ''
        // },
        // type: {
        //     type: String,
        //     default: 'canvas'
        // },
    },
    data() {
        return {
            logoImage: require('./icon/icon.png')
        }
    },
    watch: {
        // 二维码跳转地址
        value(newVal) {
            console.log(newVal);
            if (newVal !== '') {
                this.generateCode()
            }
        },
        // 二维码大小
        size(newVal) {
            console.log(newVal);
            this.generateCode()
        },
        // 二维码纠错等级
        errorCorrectionLevel(newVal) {
            console.log(newVal);
            this.generateCode()
        },
        colorDark(newVal) {
            console.log(newVal);
            this.generateCode()
        },
        colorLight(newVal) {
            console.log(newVal);
            this.generateCode()
        },
        margin(newVal) {
            console.log(newVal);
            this.generateCode()
        },

    },
    mounted() {
        this.generateCode()
    },
    methods: {
        generateCode() {
            this.$refs.canvasWrapper.innerHTML = ''
            let opts = {
                errorCorrectionLevel: this.errorCorrectionLevel, //容错级别
                type: "image/png", //生成的二维码类型
                quality: 0.3, //二维码质量
                margin: this.margin, //二维码留白边距
                maskPattern: 0,
                width: this.size ? this.size : 130, //宽
                height: this.size ? this.size : 130, //高
                color: {
                    dark: this.colorDark, //前景色
                    light: this.colorLight, //背景色
                },
                // imageUrl: require("./icon/icon.png"), //欲嵌入至二维码中心的 LOGO 地址
            };
            console.log(opts);
            let canvasimg
            QRCode.toCanvas(this.value, opts, (error, canvas) => {
                if (error) {
                    console.error(error)
                    return
                }
                canvasimg = canvas
                // 在canvas的父元素中插入canvas元素
                this.$refs.canvasWrapper.appendChild(canvas)
            })
            console.log(canvasimg);
            // 添加二维码中间的图片
        }
    }
}
</script>

  

•  vue-qr

<template>
    <div class="count-to-wrapper">
        <vue-qr :text="value" :size="size" :colorDark="colorDark" :colorLight="colorLight" :correctLevel="correctLevel"
            :margin="margin" :logoSrc="logoSrc" :logoMargin="logoMargin" :logoCornerRadius="logoCornerRadius"
            :backgroundColor="backgroundColor"></vue-qr>
    </div>
</template>
  
<script>
import VueQr from 'vue-qr'
export default {
    name: 'QRCodeConvert',
    components: { VueQr },
    props: {
        // 二维码跳转地址
        value: {
            type: String,
            default: ''
        },
        // 二维码大小
        size: {
            type: Number,
            default: ''
        },
        correctLevel: {
            type: Number,
            default: 1
        },
        colorDark: {
            type: String,
            default: '#000000'
        },
        colorLight: {
            type: String,
            default: '#ffffff'
        },
        margin: {
            type: Number,
            default: 0
        },
        logoSrc: {
            type: String,
            default: ""
        },
        logoMargin: {
            type: Number,
            default: 0
        },
        logoCornerRadius: {
            type: Number,
            default: 5
        },
        backgroundColor: {
            type: String,
            default: ""
        },
        // bgSrc: {
        //     type: String,
        //     default: ""
        // },
    },
    data() {
        return {
        }
    },
    watch: {
    },
    mounted() {
        // this.generateCode()
    },
    methods: {
    }
}
</script>

  

6.使用时引入改组件或者把塌定义为全局组件