vue项目中使用生成动态二维码

vue项目中使用QRCode.js生成二维码

看了好多blog，也尝试了多种方法，最后在QRCode.js文档上终于看懂了一些，一路踩着坑，终于做出了符合自己心意的东西。

1、环境准备

（1）、首先在项目中安装qrcodejs2：

npm i qrcodejs2

（2）、在组件中调用，我是在哪儿使用哪儿调用的。（ps：在main.js中引入会报错）

2、代码

<template>  
    <div class="qrBox">    
        <h3>手机扫描，安全登录</h3>    
        <div id="qrCode" ref="qrCodeDiv"></div>    
        <p>      
            <span @click="reg">免费注册</span>    
        </p>  
    </div>
</template>

<script>  
    // 引入qrcode  
    import QRCode from 'qrcodejs2';   
    export default {        
        name: "loginCode",      
        props:['codeName'], //是获取当前时间毫秒数，通过“父传子”方式传递下来
        data(){         
            return{            
                text:''          
            }      
        },     
        methods:{        
            bindQRCode() {          
                this.text = this.codeName;      
                // new QRCode(this.$refs.qrCodeDiv, this.text)          
                new QRCode(this.$refs.qrCodeDiv, {            
                    text: this.text.toFixed(0), //text必须是字符串
                    width: 180,            
                    height: 180,            
                    colorDark: "#333333", //二维码颜色            
                    colorLight: "#ffffff", //二维码背景色            
                    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H          
                })       
            },        
            reg(){         
                this.$router.push("/adminLoginTwo")        
                }      
            },     
        mounted () {        
            this.$nextTick(function () {          
                this.bindQRCode();        
            })      
        }    
    }
</script>

<style scoped lang="stylus">  
    .qrBox   
        width: 100%    
        height: 100%    
        text-align center   
        h3      
            line-height 40px     
            margin-bottom 20px    
        #qrCode      
            width: 180px      
            height: 180px     
            margin 0 auto      
            padding 10px      
            border 1px solid #ddd    
        p      
            line-height 30px      
            text-align right      
            margin-top 30px      
            padding-right 100px      
        span        
            cursor pointer
</style>

3、效果展示