关于qrcodejs2 二维码组件

最新推荐文章于 2024-05-15 10:00:55 发布

兔老大的胡萝卜

最新推荐文章于 2024-05-15 10:00:55 发布

阅读量192

点赞数

分类专栏：前端 vue 文章标签：前端

本文链接：https://blog.csdn.net/nuoyuezuo/article/details/127982263

版权

前端同时被 2 个专栏收录

70 篇文章 1 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

直接写成组件

<template>
    <div>
        <div ref="qrcode"></div>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2'
    export default {
        name: "PrintQrCode",
        props: {
            text: {
                required: true,
                default: null
            },
            width: {
                type: Number,
                required: false,
                default: 84
            },
            height: {
                type: Number,
                required: false,
                default: 84
            }
        },
        data() {
            return {
                count: null,
                data: null
            }
        },
        mounted() {
            this.qrcode();
        },
        methods:{
            qrcode() {
                let qrcode = new QRCode(this.$refs.qrcode, {
                    width: this.width,
                    height: this.height,
                    text: this.text, // 二维码地址
                    colorDark : "#000",
                    colorLight : "#fff",
                    correctLevel : QRCode.CorrectLevel.L
                })
            },
        }
    }
      // correctLevel 容错级别，可设置为：
	  // QRCode.CorrectLevel.L
	  // QRCode.CorrectLevel.M
	  // QRCode.CorrectLevel.Q
	  // QRCode.CorrectLevel.H
	  // L - M - Q - H 码密度越来越高，默认不设置是用 H   H有时候扫不出来
</script>