VUE 生成二维码

最新推荐文章于 2024-08-10 06:00:00 发布

weixin_38107457

最新推荐文章于 2024-08-10 06:00:00 发布

阅读量178

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_38107457/article/details/116244292

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

npm install qrcodejs2 --save

vue文件中引入插件：

    <-- 发货表头 -->
	  <el-row>
          <el-col
            :span="23"
            style="margin-bottom: 10px"
          >
            <ul class="master">
              <li>
                <span style="font-weight:bold;">供应商：</span>
                <span>{{ supplierFullName }}</span>
                <span style="font-weight:bold;margin-left:120px;">发货日期：</span>
                <span>{{ parseTime(deliveryDate,'{y}-{m}-{d}') }}</span>
              </li>
              <li>
                <span style="font-weight:bold;">发货号：</span>
                <span>{{ existDeliveryNo }}</span>
                <span style="font-weight:bold;margin-left:35px;">合同号码：</span>
                <span>{{ existContractNo }}</span>
              </li>
            </ul>
          </el-col>
          
		  <-- 二维码区域 -->	
          <el-col :span="1">
            <div class="qrbarcode">
              <div id="qrCode" ref="qrCodeDiv"></div>
            </div>
          </el-col>
          
      </el-row>
        
      <-- 发货明细 -->
      <el-table class="detail" ref="deliveryTable" :data="orderDelivery" stripe border>
      ...
	  </el-table>

```bash
<script>
  // 引入插件
   import QRCode from 'qrcodejs2'
	
   data() {
     return {
      ...
      // 定义二维码对象
      qrcode: null,
      // 定义二维码输出内容
      qrtext: ''
    }
   },
   mounted() {
    // 初始化，获取数据,并生成二维码
    this.doInit()
   },
   methods: {
    doInit() {
      // 查询送货数据
      querySupplierOrderDelivery().then(data => {
        
        if (data != null && data.length > 0) {
          ...
          this.qrtext = ''
          // 根据获取的明细数据拼出二维码数据
          data.forEach(element => {
            this.qrtext = this.qrtext + element.deliveryNo + ',' + element.orderNo + ',' +
            element.orderItem + ',' + element.supplierOrder.materialCode + ',' + element.deliveryQty + '|'
          })
          this.$nextTick(() => {
            // 如果二维码对象为空，则进行创建，否则直接对二维码数据进行赋值
            if (this.qrcode == null) {
              this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
                text: this.qrtext,
                width: 100,
                height: 100,
                colorDark: '#333333', // 二维码颜色
                colorLight: '#ffffff', // 二维码背景色
                correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
              })
            } else {
              this.qrcode.makeCode(this.qrtext)
            }
          })
        }
	  // 出错处理
      }).catch(err => {
		...
      })
    }
</script>