Vue前台可以生成二维码了,您还在用后台生成吗?

作者:自由 2020/12/6 17:59:24
element ui生成通过qrcodejs2来实现二维码,节省了从后台生成二维码的时间以及后台生成二维码后还需要把地址传给前台

二维码现在已经随处可见了,现在的生活中各种二维码呈现在大家面前,方便大家手机或者手持枪等手持设备进行识别,同时用来标识当前商品或者物品的唯一性。 我们在工业等生产制造业用到的二维码更多,像部品、BOM组件等等。 所以我们无论是做BS开发或者客户端开发,有时用到生成二维码的时候还是比较多的。 以前用java或者.net等后端语言进行生成,前台其实也是可以生成二维码,今天我们看一下vue前台生成二维码。

1.预览二维码和条形码生成效果

2.安装二维码插件和条形码插件 

npm install  qrcodejs2 --save
npm install  jsbarcode--save

3.引用二维码插件和条形码插件

  import QRCode from 'qrcodejs2'
  import JsBarcode from 'jsbarcode'

4.页面布局使用二维码生成插件 

<template>
  <div id="QRcodeGeneration">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><h1><i class="el-icon-lx-cascades"></i> 二维码(将文本生成二维码)</h1></el-breadcrumb-item>        
            </el-breadcrumb>
        </div>
    <el-row>
      <el-col :span="18" class="qrcol">
        <el-card :body-style="{ padding: '0px' }">
          <el-input type="textarea" :autosize="{ minRows: 9, maxRows: 9}" v-model="QrCodeTextarea" placeholder="请输入内容">
          </el-input>
          <div style="text-align: right;">
            <b>字符数量:{{this.QrCodeWordsNumberText}}</b>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{ padding: '0px' }">
          <div id="qrcode" ref="qrcodeContainer"></div>
        </el-card>
      </el-col>
    </el-row>

        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><h1><i class="el-icon-lx-cascades"></i> 条形码(将文本生成条形码)</h1></el-breadcrumb-item>        
            </el-breadcrumb>
        </div>
    <el-row>
      <el-col :span="18" class="qrcol">
        <el-card :body-style="{ padding: '0px' }">
          <el-input type="textarea" :autosize="{ minRows: 9, maxRows: 9}" maxlength="25" v-model="BarcodeTextarea" placeholder="请输入内容">
          </el-input>
          <div style="text-align: right;">
            <b>字符数量:{{this.BarcodeWordsNumberText}}</b>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card :body-style="{ padding: '0px' }" >
          <svg id="barcode"  class="BarcodeStyle"></svg>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

5.初期化定义插件并使用二维码插件和条形码插件

<script>
  import QRCode from 'qrcodejs2'
  import JsBarcode from 'jsbarcode'
  export default {
    data: function() {
      return {
        keyword: '',
        QrCodeTextarea: '',
        BarcodeTextarea: '',
        BarcodeWordsNumberText: '',
        QrCodeWordsNumberText: ''
      }
    },
    mounted() { //调用
      this.qrcode();
      this.barcode();
    },
    methods: {
      qrcode() {
        let tqrcode = new QRCode('qrcode', {
          width: 200,
          height: 200, // 高度  [图片上传失败...(image-9ad77b-1525851843730)]
          text: this.QrCodeTextarea, // 二维码地址 
          render: 'canvas', // 设置渲染方式(有两种方式 table和canvas,默认是canvas)  
          background: '#f0f',
          foreground: '#ff0',
          colorDark: "#0aa",
          colorLight: "#fff",
        })
      },
      barcode() {
        JsBarcode("#barcode", this.BarcodeTextarea, {
          format: "CODE128", //选择要使用的条形码类型
          // lineColor: "#0aa",
          //         width: 4,
          //         height: 40,
          width: '1px',
          height: '55px',
          fontSize: '22px', //字体大小
          displayValue: true, //是否在条形码下方显示文字
          textPosition: "top" //设置文本的垂直位置
        });
      }
    },
    watch: {
      // 如果 `question` 发生改变,这个函数就会运行
      QrCodeTextarea: function() {
        let qrcodeEL = document.getElementById("qrcode");
        let qrcode = new QRCode(qrcodeEL);
        document.getElementById("qrcode").innerHTML = "";
        this.showQRCode = true;
        this.qrcode();
        this.QrCodeWordsNumberText = this.QrCodeTextarea.length;
        // this.barcode();
      },
      BarcodeTextarea: function() {
        // let barcodeEL = document.getElementById("barcode");      
        document.getElementById("barcode").innerHTML = "";
        this.barcode();
        this.BarcodeWordsNumberText = this.BarcodeTextarea.length;
      },
    },
    computed: {
      list() {
        return this.iconList.filter((item) => {
          return item.indexOf(this.keyword) !== -1;
        })
      }
    }
  }
</script>

<style>
  #qrcode {
    display: inline-block;

  }

  #QRcodeGeneration {
        width: 100%;
    text-align: center;
  }

  .qrcol {
    border-radius: 4px;
    min-height: 150px;
    /* background-color: #B3E19D; */
  }
  
  .BarcodeStyle {
    border-radius: 4px;
    min-height: 200px;
    /* background-color: #B3E19D; */
  }
</style>

vue生成二维码的代码基本上就这些了,主要为了简化后台代码,不用那么费劲的在写后台了。 后续我会分享更多的技术相关的内容,请大家多多关注。

二维码生成

vue生成二维码

二维码

批量生成二维码

评论: