qrcode & vue

$ yarn add qrcode.vue 

# OR

$ npm i -S qrcode.vue

https://www.npmjs.com/package/qrcode.vue

single-file components

demo-qrcode.vue

<template>

    <div>

        <qrcode-vue :value="url" :size="size" level="H"></qrcode-vue>

    </div>

</template>

<script>

import QrcodeVue from "qrcode.vue"';

export default {

    data() {

        return {

            url: "https://github.xgqfrms.xyz",

            size: 100,

        }

    },

    components: {

        QrcodeVue,

    },

}

</script> 

---

bug

http://47.97.241.6:8080/eapp/iframeTest/index.html#https://m.weibo.cn

https://github.com/scopewu/qrcode.vue/issues/10

https://github.com/scopewu/qrcode.vue/blob/master/src/index.js

solutions

level = L

https://github.com/scopewu/qrcode.vue#component-props

https://github.com/scopewu/qrcode.vue/issues/10#issuecomment-487810869

I think this a little bug of my code , because using the wrong the symbol's capacity.

---

node-qrcode

https://www.npmjs.com/package/qrcode

https://github.com/soldair/node-qrcode

    setTimeout(() => {

        // const QRCode = require("qrcode");

        let canvas = document.getElementById("qrcode_canvas");

        // canvas.width = 100;

        // canvas.height = 100;

        // canvas.style.width  = "100px";

        // canvas.style.height = "100px";

        let url = this.url;

        QRCode.toCanvas(

            canvas,

            url,

            {

                width: 120,

                errorCorrectionLevel: "H",

            },

            function (error) {

                if (error) {

                    console.error(error);

                } else {

                    console.log("success!");

                }

            }

        );

    }, 0);

qrcode.js

https://davidshimjs.github.io/qrcodejs/

https://github.com/davidshimjs/qrcodejs