在elementui admin中动态生成二维码

1.安装依赖

npm i qrcodejs2 --save

2.template中

<template>

<div>

 　　<el-input v-model="QRCodeInfo" placeholder="请输入二维码内容"></el-input>

 　　<el-button type="primary" @click="showQRCode">生成二维码</el-button>

　　 <div id="qrCode" ref="qrCodeDiv"></div>

</div>

</template>

3.script中

<script>

import QRCode from 'qrcodejs2'

export default {

　　name:'qrcode',

　　data(){

　　return {

　　　　QRCodeInfo: '',

　　}

　　},

　　methods:{

　　　　createdQRCode(){

     　　 　　this.$nextTick(()=>{

        　　　　this.$refs.qrCodeDiv.innerHTML = '';//二维码初始化

        　　　　new QRCode(this.$refs.qrCodeDiv, {

         　　　　　　 text: this.QRCodeInfo,//二维码链接，参数是否添加看需求

          　　　　　　width: 200,//二维码宽度

          　　　　　　height: 200,//二维码高度

         　　　　　　 colorDark: "#333333", //二维码颜色

          　　　　　　colorLight: "#ffffff", //二维码背景色

         　　　　　　 correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H

        　　　　});

      　　　　})

    　　},

    　　showQRCode(){

      　　this.createdQRCode()

   　　 },

　　}

}

</script>