一.条形码
1.npm install jsbarcode --save //vue-cli 导入jsbarcode包
2.import JsBarcodefrom 'jsbarcode ' 或者 var JsBarcode = require('jsbarcode') //对应组件引入
3.<svg ref='barcode' id="barcode"></svg> //插件支持 #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.<div id="qrcode" ref="qrcode"></div> //插件支持 #id与this.$refs.ref获得dom 建议使用div
4.new QRCode('qrcode',{ //生成条形码 注:this.$refs.barcode 或者 "qrcode" 不用加#
width: 200, // 设置宽度，单位像素
height: 200, // 设置高度，单位像素
text: 'https://www.baidu.com' // 设置二维码内容或跳转地址
})
5.生成如图所示的二维码
