<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忘記怎麼裝了  去搜一下裝上就好