生成二维码——vue

使用了第三方插件qrcode，安装依赖

npm i QRCode --save

编写一个二维码组件

<template>
    <div id="qrCode">
        <div id="code"></div>
        <canvas id="canvas"></canvas>
    </div>
</template>
<style>
#canvas {
    width: 100% !important;
    height: 100% !important;
}
</style>
<script>
import QRCode from "qrcode";
export default {
    data() {
        return {

		};
    },

    components: {
        QRCode: QRCode
    },
    methods: {
        qrcode() {
            var canvas = document.getElementById("canvas");
            QRCode.toCanvas(canvas,“需要生产二维码的内容”, function(error) {
                if (error) console.error(error);
                console.log("转换成功");
            });
        }
    },
    mounted() {
       		let that=this;
            that.qrcode();
        
    }
};
</script>

引入组件，调用组件

import QRCode from "@/components/QRCode.vue";
components: {
        QRCode
    },

使用QRCode标签即可
<QRCode></QRCode>