> 文章列表 > vue-qr 生成二维码-使用

vue-qr 生成二维码-使用

vue-qr 生成二维码-使用

1、vue-qr官网说明

vue-qr - npm

2、使用

        2.1 安装 vue-qr

                npm install vue-qr --save

        2.2 代码

                import vueQr from 'vue-qr'; 

<el-dialog title="摘要" :visible.sync="openSummary" width="700px" append-to-body>

         <el-row>

                <el-col :span="10">

                    <div style="border:1px solid #ccc;width:200px;text-align: center;margin-left:20px;margin-top:-10px;">

                            <vue-qr :logoSrc="qrcodeImageUrl" :text="qrcodeConts" :size="180"></vue-qr>

                            <div style="padding-bottom:10px;">设备二维码</div>

                </div>

            </el-col>

        </el-row>

</el-dialog>

2.3 js代码

 data() {

        return {

                

                //二维码图片

            qrcodeImageUrl:'',

            //二维码内容

            qrcodeConts:'',

        }

)

methods: {

qrcodeConts:二维码需要参数  扫描二维码跳转路径或者显示的内容

        

}