vue生成二维码：vue-qr

张彡543

已于 2023-06-07 14:35:46 修改

阅读量601

点赞数 1

文章标签： vue.js javascript 前端

于 2023-06-07 14:09:28 首次发布

本文链接：https://blog.csdn.net/weixin_60170500/article/details/131085906

版权

本文展示了在Vue.js应用中如何集成vue-qr组件来生成和展示二维码。首先通过npm安装依赖，然后在组件中引入并注册。在表格中添加按钮触发查看二维码的弹窗，弹窗内包含可自定义的二维码，用户可以上传新图标并调整尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
   }
}