vue一维码，二维码生成

在项目中生成条形码和二维码

一.条形码

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, HmaskPattern: 7, // 0, 1, 2, 3, 4, 5, 6, 7margin: 5, // Define how much wide the quiet zone should bescale: 4,width: 100, // 宽度color: {light: '#eee', // 背景色dark: '#ff0000' // 二维码颜色}}, (error) => {if (error) {console.error(error)}console.log('success!')})}}},mounted () {this.bindBarCode('#barCode')}
}
</script>

图示：

vue一维码，二维码生成相关推荐

Qt编写项目作品26-一维码二维码解析及生成
一.功能特点支持本地USB摄像头实时解析. 支持网络视频流实时解析. 解码格式支持一维码二维码等各种编码. 可生成一维码二维码,一维码支持EAN_13格式,其他格式可定制. 条形码参数支持宽度.高度 ...
STM32F407获取OV7670摄像头图像及上位机解码（一维码二维码）
STM32F407获取OV7670摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32F407对30万像素OV7670摄像头进行图像捕获,并通过串口将数据 ...
halcon视觉一维、二维码的区别-@龙熙视觉培训李杰
一维码(条形码) 一维条码即指条码条和空的排列规则,常用的一维码的码制包括:EAN码.39码.交叉25码.UPC码.128码.93码,ISBN码,及Codabar(库德巴码)等. 条码是由一组规则排列 ...
前端条码打印方案(表格+中文+一维码+二维码)
前言条码打印不同于普通打印机,条码大小各不相同,需要针对不同标签贴纸开发不同的样式 1. 条码打印的两种方案: 后端ZPL指令打印前端调用浏览器打印 2. 优缺点分析: 优点缺点后端ZPL指令 ...
智沃邦条码扫码出入库管理系统仓库出入库管理系统一维码二维码系统
智沃邦条码出入库管理系统,将普通的商品进行重新编码,并自动生成的一维码或者二维码,通过扫描器进行扫描操作,实现商品的出入库业务.本系统由西安智沃邦信息科技有限公司开发. 一.系统简介: 1.本系统可以 ...
STM32H750获取OV5640摄像头图像及上位机解码（一维码二维码）
STM32H750获取OV5640摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32H750对500万像素OV5640摄像头进行图像捕获,并通过串口将数 ...
STM32F407获取OV2640摄像头图像及上位机解码（一维码二维码）
STM32F407获取OV2640摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32F407对200万像素OV2640摄像头进行图像捕获,并通过串口将数 ...
STM32H750获取OV2640摄像头图像及上位机解码（一维码二维码）
STM32H750获取OV2640摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32H750对200万像素OV2640摄像头进行图像捕获,并通过串口将数 ...
STM32H750获取OV7670摄像头图像及上位机解码（一维码二维码）
STM32H750获取OV7670摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32H750对30万像素OV7670摄像头进行图像捕获,并通过串口将数据 ...
今日小程序推荐：香蕉打码-二维码随意生成
2019独角兽企业重金招聘Python工程师标准>>> 最近小编在处理公众号的事项时发现想要DIY二维码,本来想生成动态的,发现有点难度,就找到了小程序,其中有一款小程序可以生成静态 ...

vue一维码，二维码生成

在项目中生成条形码和二维码

一.条形码

二.二维码

vue一维码，二维码生成相关推荐

最新文章

热门文章