手机建设网站制作,自己做网站都要什么手续,临安市建设局网站,百度搜索高级搜索前提条件
已存在的vue3vite架构前端项目对二维码分类有一定的了解
生成的码的样式如下#xff08;DataMatrix#xff09; 该二维码容量如下 详情见#xff1a;DataMatrix介绍 Vue3Vite 导入 bwip-js生成DataMatrix
1. 安装
npm install bwip-js --save2. 引入使用
…前提条件
已存在的vue3vite架构前端项目对二维码分类有一定的了解
生成的码的样式如下DataMatrix 该二维码容量如下 详情见DataMatrix介绍 Vue3Vite 导入 bwip-js生成DataMatrix
1. 安装
npm install bwip-js --save2. 引入使用
templatecanvas idbarcode stylewidth: 100%;height: 100%;/canvas
/templatescript setup langts
import { reactive, ref, watch, onMounted, nextTick } from vue
import * as bwipjs from bwip-jsonMounted(() {nextTick(() {// 因为我的代码没有贴全我的Canvas是动态生成的在页面加载完成之后再添加到页面的元素// 因此就在这个nextTick方法里面用才会生效不然会报ID不存在的错误// 如果是页面加载就生成的常规组件 就直接调用去掉nextTick这一层handleCanvasDataMatrix(barcode, 01069367337124121724080810FT202207073, 12, 12)})
})// 组件ID二维码内容宽度高度
const handleCanvasDataMatrix (canvasId: string, content: string, width: number, height: number) {let options {bcid: datamatrix, // Barcode typetext: content, // Text to encodescale: 3, // 3x scaling factorheight: height,width: width, // Bar height, in millimetersincludetext: false, // Show human-readable texttextxalign: center, // Always good to set this}let canvas bwipjs.toCanvas(canvasId, options);
}
/script
异常处理 我这里在build的过程中会编译不通过报下面的错 解决在项目根目录下新建declaration.d.ts文件加上下面的一句代码即可编译通过 declare module bwip-jsbwip-js库github代码地址
