url生成二維碼,vue版

vue add qrcode;

 

 

<template>
    <div id="qr-code">
        <div class="code"></div>
        <canvas class="canvas" id="canvas"></canvas>
    </div>
</template>

 

<script>
import QRCode from "qrcode";

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

    mounted() {
        this.GetQRCode();
    },
    methods: {
        qrCode(url) {
            const code = document.querySelector(".code");
            if (code.children.length != 0) {
                code.removeChild(code[0]);
            }

            var canvas = document.getElementById("canvas");
            QRCode.toCanvas(canvas, url, { width: 140, height: 140 }, function(
                err
            ) {
                if (err) console.log(err);
            });

            const img = document.createElement("img");
            img.setAttribute(
                "src",
                document.getElementById("canvas").toDataURL("image/jpg")
            );
            document.querySelector(".code").append(img);
        },

        GetQRCode() {
            this.qrCode(
                "https://www.jns.red/jns/index.html?code=360c8fb91b9f7fcea470a7d3755e877f&billType=J002#/carOwner/carCheckReport?code=360c8fb91b9f7fcea470a7d3755e877f&billType=J002"
            );
        }
    }
};
</script>

 

 

<style lang="less" scoped>
#qr-code {
    width: 100%;
    height: 100%;

    .canvas {
        display: none;
    }

    .code {
        height: 140px;
        width: 140px;
        margin: 0 auto;
        border: 1px solid #ccc;
        margin-top: 100px;
    }
    p {
        margin: 0 auto;
        margin-top: 10px;
        font-size: 14px;
        color: #555;
        text-align: center;
    }
}
</style>