vue + jsbarcode(条形码) 与 vue + qrcodejs2(二维码)

一.条形码

1.npm install jsbarcode --save   //vue-cli 导入jsbarcode包

2.import JsBarcodefrom 'jsbarcode ' 或者 var JsBarcode = require('jsbarcode')   //对应组件引入

3.    //插件支持  #id与this.$refs.ref获得dom               注:貌似仅支持svg标签

4.   JsBarcode(this.$refs.barcode, "1234", {              //生成条形码    注:this.$refs.barcode或者  "#barcode"

      format: "CODE39",//选择要使用的条形码类型 

      width: 3,//设置条之间的宽度

      height: 100,//高度

      displayValue: true,//是否在条形码下方显示文字

      text: "457545489498948948986",//覆盖显示的文本

      fontOptions: "bold italic",//使文字加粗体或变斜体

      font: "fantasy",//设置文本的字体

      textAlign: "left",//设置文本的水平对齐方式

      textPosition: "bottom",//设置文本的垂直位置

      textMargin: 5,//设置条形码和文本之间的间距

      fontSize: 15,//设置文本的大小

      background: "#eee",//设置条形码的背景

      lineColor: "#2196f3",//设置条和文本的颜色。

      margin: 15//设置条形码周围的空白边距

    });

5.生成如图所示的条形码

条形码

二.二维码

1.npm install qrcodejs2 --save    //vue-cli 导入qrcodejs2包

2.import QRCode from 'qrcodejs2' 或者 var QRCode = require('qrcodejs2')   //对应组件引入

3.

  //插件支持  #id与this.$refs.ref获得dom    建议使用div  

4.new QRCode('qrcode',{                   //生成条形码    注:this.$refs.barcode  或者  "qrcode" 不用加#

        width: 200, // 设置宽度，单位像素

        height: 200, // 设置高度，单位像素

        text: 'https://www.baidu.com'  // 设置二维码内容或跳转地址

    })

5.生成如图所示的二维码

二维码