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

  简介:维码现在已经随处可见了，现在的生活中各种二维码呈现在大家面前，方便大家手机或者手持枪等手持设备进行识别，同时用来标识当前商品或者物品的唯一性。 我们在工业等生产制造业用到的二维码更多，像部品、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生成二维码的代码基本上就这些了，主要为了简化后台代码，不用那么费劲的在写后台了。 后续我会分享更多的技术相关的内容，请大家多多关注。