使用qrcode.js生成二维码

QRCodeJS2封装与使用

原创

已于 2022-12-08 11:19:06 修改 · 654 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

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

本文介绍如何安装和封装QRCodeJS2组件，并提供了一个Vue示例代码，用于生成和初始化二维码。通过该示例，你可以了解如何将二维码绑定到DOM元素上，并获取其base64编码。

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)