qrcode & vue

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