element-ui生成二维码

1，终端输入 npm install  qrcodejs2  --save 安装qrcodejs2

npm install  qrcodejs2  --save

2，页面引入使用终端安装好的qrcodejs2

<template>
    <div>
        <!-- 二维码生成 -->
        <div @click="qrCodeGeneration()"></div>
        <!-- 二维码弹框 -->
        <el-dialog title="二维码" :visible.sync="qrCodeVisible" width="27%" >
            <!-- 二维码图片 -->
            <div id="qrCodeUrl"></div>
            <!-- 取消按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="qrCodeVisible = false">取消</el-button>
            </span>
        </el-dialog>     
    </div>
</template>
<script>
    // 引入刚下载的qrcodejs2
    import QRCode from 'qrcodejs2'

    export default{
        name: 'qrCode',
        data(){
		    return {
			    qrCodeVisible: false // 二维码弹框
			}
		},
		methos:{
            // 二维码生成
			qrCodeGeneration() {
                // 二维码弹框显示
                this.qrCodeVisible = true;
                // 生成二维码
                this.$nextTick(function () {
                    document.getElementById("qrCodeUrl").innerHTML = "";
                    let qrCodeUrl= new QRCode("qrCodeUrl", {
                        width: 200,
                        height: 200,
                        text: "生成二维码的内容",
                        colorDark: "#409EFF",
                        colorLight: "#fff"
                    });
                });
            }
		}
	}
</script>

<style scoped>
    /deep/ .el-dialog__header {
        text-align: center;
    }

    /deep/ #qrCodeUrl > img {
        margin: 0 auto;
    }
</style>

3，显示效果