element-ui生成二维码

最新推荐文章于 2024-09-09 10:57:33 发布

总有对的时候

最新推荐文章于 2024-09-09 10:57:33 发布

阅读量3.2k

点赞数 5

分类专栏： vue elementUi 文章标签： elementui

本文链接：https://blog.csdn.net/hannikan/article/details/120986712

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

elementUi

4 篇文章 0 订阅

订阅专栏

该博客介绍了如何在前端项目中使用npm安装qrcodejs2库，并展示了一个Vue组件的例子，用于生成和显示二维码。当点击特定元素时，会弹出一个包含二维码的对话框，二维码的内容可以自定义，并且设置了颜色和尺寸。通过这个例子，读者可以学习到如何在前端实现二维码生成和显示的功能。

摘要由CSDN通过智能技术生成

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>