vue生成二维码：vue-qr

1.安包

npm install vue-qr --save

2.引入

import vueQr from "vue-qr"

export default {
  components: {
    vueQr
  }
}

3.使用

<el-table>
   <el-table-column label="物料码" align="center" width="80" prop="parkCode">
       <template slot-scope="scope">
       <el-button size="mini" type="primary" @click="handleQr(scope.row)">查看</el-button>
   </el-table-column>
</el-table>

//二维码弹框
<el-dialog title="查看物料码" :visible.sync="readQr" @close="clearQr"> //点击查看二维码
  <el-row :gutter="20">
    <el-col :span="12">
      //二维码标签
      <vue-qr :logoSrc="qr.imageUrl" :text="qr.qrSrc" :size="qr.qrSize"></vue-qr>
    </el-col>
    //自定义二维码图标尺寸等：上传图标并可以保存二维码
    <el-col :span="12">
      <el-form>
        <el-form-item label="自定义图标">
          <el-upload :action="uploadUrl" list-type="excelList" :multiple="false" :on-success="handleQrSuccess">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="自定义尺寸">
          <el-input v-model="qrSize" type="number" placeholder="请输入内容"></el-input>
          <div slot="tip" class="el-upload__tip">自定义logo图标</div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="changeQrSize">确定</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</el-dialog>

data() {
  return {
    qr: {
      qrSize: 300,
      qrSrc: '',
      imageUrl: require('@/assets/logo/logo.png')        //自定义初始图片
    },
    qrSize: 300,        //自定义初始二维码大小
    imageUrl: null,     //二维码链接
    readQr: false,      //弹框
  }
}

methods:{
     async handleQr(row) {        //获取二维码链接：接口后端获取
        let parkCode = row.parkCode
        getInviteUrl(parkCode).then(response => {
        this.qr.qrSrc = response.data
        //弹框
        this.readQr = true
        })
    },
    //二维码弹框赋初始值
    clearQr() {
       this.qr.qrSrc = ""
       this.qr.imageUrl = require('@/assets/logo/logo.png')
       this.qr.qrSize = 300
       this.qrSize = 300
    },
    //自定义图标
    handleQrSuccess(response, file, fileList) {
            const fileName = file.raw.name
            const index = fileName.lastIndexOf('.')
            const exe = fileName.substr(index + 1)
            if (exe == "jpg" || exe == "png" || exe == "jpeg" || exe == "bmp" || exe == "gif"       || exe == "webp" || exe == "psd" || exe == "svg" || exe == "tiff") {
            this.imageUrl = URL.createObjectURL(file.raw)
            } else {
            alert("请上传图片！")
           }
   },
   //图片上传赋值
   changePayQrSize(val) {
           this.payQr.payQrSize = Number(this.payQrSize)
           this.payQr.payImageUrl = this.payImageUrl
   }
}