2015做导航网站有哪些,长沙排名推广,wordpress自定义文章,wordpress 安装百度统计前提条件 
已存在的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代码地址