标签：弹框 qrcodejs2 生成 QRCode 二维码 ui qrCodeUrl element

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/ #qrCodeUrl > img {
        margin: 0 auto;
    }
</style>

标签：弹框,qrcodejs2,生成,QRCode,二维码,ui,qrCodeUrl,element
来源： https://blog.csdn.net/hannikan/article/details/120986712

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。