vue动态生成二维码组件

<template>
    <div class="authorizeQRCodes">
      <div>扫描二维码查看详情</div>
        <div id="qrCode" ref="qrCodeDiv"></div>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2';
    export default {
        name: "QRCodes",
        data(){
           return{
           }
        },
        props:{
          url:String
        },
        created(){

        },
        methods:{
        },
        mounted() {
            new QRCode(this.$refs.qrCodeDiv, {
                text: this.url, // 内容自己设置，这里是props接收的url参数
                width: 200,
                height: 200,
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
            });
        }
    }


</script>

<style scoped>
    .authorizeQRCodes{
        /*height: 100vh;*/
        width: 100%;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
      padding-bottom: 20px;

    }
    .authorizeQRCodes>div{
        width: 100%;
        display: flex;
        justify-content: center;

    }
    #qrCode{
        margin-top: 4vh;
    }
    /*.impowerBox .qrcode {width: 200px;}*/
    /*.impowerBox .title {display: none;}*/
    /*.impowerBox .info {width: 200px;}*/
    /*.status_icon {display: none  !important}*/
    /*.impowerBox .status {text-align: center;}*/
</style>

qrcodejs2忘记怎么装了  去搜一下装上就好