vue生成二维码

因项目需要，需要有一个点击按钮生成二维码的功能，扫码可以获取详细内容，开始搬砖。

本人查找到生成二维码有两种方式

方式一：qrcodeGitHub - davidshimjs/qrcodejs: Cross-browser QRCode generator for javascriptCross-browser QRCode generator for javascript. Contribute to davidshimjs/qrcodejs development by creating an account on GitHub.https://github.com/davidshimjs/qrcodejs

npm i qrcodejs2 --save

所需页面引入 import QRCode from 'qrcodejs2'

方式二：vue-qr

https://github.com/Binaryify/vue-qr#readmehttps://github.com/Binaryify/vue-qr#readme

npm i vue-qr --save

所需页面引入 import vueQr from 'vue-qr'

本人用的是qrcode

下面来介绍下qrcode

<template>
    <div>
        <el-button type="primary" @click="payOrder">生成二维码</el-button>
        <el-dialog v-model="code" @close="closeCode" title="二维码">
            <div class="paycode">
                <div id="qrcode" ref="qrcode"></div>
            </div>
        </el-dialog>
    </div>
</template>
  
  
<script>
import QRCode from 'qrcodejs2'
import { ref } from 'vue'
const code = ref(false)

export default {
    data() {
        return {
            code
        };
    },


    methods: {
        // 展示二维码
        payOrder() {
            this.code = true
            this.qrcode = 'https://www.baidu.com'  //所要展示的二维码链接，扫码后会跳转
            this.$nextTick(() => {
                this.crateQrcode()
            })
        },


        // 生成二维码
        crateQrcode() {
            this.qr = new QRCode('qrcode', {
                width: 150,//二维码宽度
                height: 150, //二维码高度
                text: this.qrcode, // 二维码内容
                colorDark: "#000",// 二维码颜色
                colorLight: "#fff"// 二维码背景色
            })
            console.log(this.qrcode)
        },
        // 关闭弹框,清除已经生成的二维码
        closeCode() {
            this.$refs.qrcode.innerHTML = ''
        }
    }
}
</script>

这样一看还是挺简单的

可是我要的是点击按钮后有多个二维码，简单只要设置个循环就好了，看代码

<template>
    <div>
        <div id="qrcode" ref="qrCodeDiv" style="margin-left:30px;margin-top:10px;">
            <div v-for="(item, index) in list" :key="index" style="float:left;margin-left:20px;">
                <div class="codeImgbox" ref="BoxImgContent" :id="'codeImgbox' + index"></div>
                <span>第{{index}}个二维码</span>
            </div><br />
        </div>
    </div>
</template>
  
  
<script>
import QRCode from 'qrcodejs2'
import { ref } from 'vue'

const dialogFormVisible = ref(false)

export default {
    data() {
        return {
            list: [],
            dialogFormVisible,
        };
    },
    mounted() {
        //此处可以循环放置，扫描二维码后跳转的链接，下面以生成40个二维码为例
        for (let index = 0; index < 40; index++) {
            this.list.push({
                url: 'www', // 二维码的地址
            })
        }
        // 循环生成对应上方数组数量的二维码，
        this.list.forEach((element, index) => {
            this.$nextTick(function () {
                this.qrcode(element.url, index)
            });
        });

    },
    methods: {
        qrcode(index) {
            new QRCode(this.$refs.qrCodeDiv.children[index].children[0], {
                width: 100,
                height: 100,
                text: 'data', // 二维码地址
                colorDark: "#000",// 二维码颜色
                colorLight: "#fff"// 二维码背景色
            });
        },
    }
}
</script>

是不是也很简单

vue生成二维码

悦读