一.条形码
Github:https://github.com/lindell/JsBarcode
条码示例:https://codepen.io/lindell/pen/eZKBdO?editors=1010
条码生成器:https://lindell.me/JsBarcode/generator/
安装依赖:
npm install jsbarcode --save
简单案例:
<template>
<canvas id="barCode"></canvas>
</template>
<script>
import JsBarcode from 'jsbarcode'
export default {
data () {
return {
bindBarCode (selector, data = '1129867908') {
JsBarcode(selector, data, {
background: '#eee',
displayValue: false,
// width: 1, //
height: 80, // 一维码的高度
margin: 10 // 一维码与容器的margin
})
}
}
},
mounted () {
this.bindBarCode('#barCode')
}
}
</script>
二.二维码
安装依赖:
npm install qrcode -S
简单示例:
<template>
<canvas id="qrCode"></canvas>
</template>
<script>
import QRCode from 'qrcode'
export default {
data () {
return {
bindQRCode (ele = 'qrCode') {
QRCode.toCanvas(document.getElementById(ele), '你是猪吗,乱扫什么码', {
// version: 1,
errorCorrectionLevel: 'L', // low, medium, quartile, high or L, M, Q, H
maskPattern: 7, // 0, 1, 2, 3, 4, 5, 6, 7
margin: 5, // Define how much wide the quiet zone should be
scale: 4,
width: 100, // 宽度
color: {
light: '#eee', // 背景色
dark: '#ff0000' // 二维码颜色
}
}, (error) => {
if (error) {
console.error(error)
}
console.log('success!')
})
}
}
},
mounted () {
this.bindBarCode('#barCode')
}
}
</script>