qrcodejs2实现二维码生成

RumbleWx

已于 2024-12-16 16:56:29 修改

阅读量214

点赞数 2

文章标签：前端 javascript 开发语言

于 2024-12-16 16:55:34 首次发布

本文链接：https://blog.youkuaiyun.com/RumbleWx/article/details/144512913

版权

<template>
    <div>
        <div id="qrCode" class="qrCode"></div>
    </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
    mounted() {
        this.createQrcode("#qrCode", "二维码数据");
    },
    methods: {
        createQrcode(id, value) {
            console.log("生成二维码", id, value);
            const container = document.querySelector(id);
            if (container) {
                // 移除已存在的二维码
                while (container.firstChild) {
                    container.removeChild(container.firstChild);
                }
                new QRCode(container, {
                    text: value,
                    width: 75,
                    height: 75,
                    colorDark: "#333",
                    colorLight: "#fff",
                    correctLevel: QRCode.CorrectLevel.L
                })
            }
        },
    }
}
</script>