使用qrcode.js生成二维码

龙在翔

已于 2022-12-08 11:19:06 修改

阅读量544

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

于 2022-11-21 16:32:16 首次发布

本文链接：https://blog.csdn.net/qq_37196621/article/details/127965300

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

git地址：https://github.com/davidshimjs/qrcodejs

1.安装

npm install --save qrcodejs2

2.封装代码：注意多个使用，绑定dom不要用ID，用ID，会将多个二维码添加到同一个dom里面

<template>
    <div ref="qrCodeDiv">

    </div>
</template>

<script>
    import QRCode from 'qrcodejs2';
    export default {
        name: "qrCode",
        data(){
            return {

            }
        },
        methods:{
            qrcodeInit(){

                var qrcode = new QRCode(this.$refs.qrCodeDiv,{
                    width : 88,
                    height : 88,
                    text:this.value.url
                });

                this.$refs.qrCodeDiv.getElementsByTagName('img')[0].onload=()=>{
                    let src=this.$refs.qrCodeDiv.getElementsByTagName('img')[0].getAttribute('src');
                    // this.$emit('input',src);//这个是不传对象，传String可以使用
                    this.value.base64=src;
                }

            }
        },
        props:{
            value:{
                type:Object
            },
        },
        mounted(){
            this.$nextTick(function () {
                this.qrcodeInit();
            })
        }

    }
</script>

<style scoped>

</style>