- 博客(195)
- 收藏
- 关注
RSS订阅原创 zebra通过zpl语言实现中文打印（三）
默认我们采用了宋体：const fontFile = normalizeZplFontFile(options.fontFile?'SIMSUN.FNT')字体目录中有SIMSUN.FNT就是宋体。既然知道有宋体，我们在输出时在zpl代码里加入字体指令即可。还记得我们批量打印函数中fontFile参数。通过zebra通过zpl语言实现中文打印（一|二）这两篇文章其实已经知道了大概流程，对于数字和英文打印没有问题，接下来讲讲关于中文字体的问题。加载字体后，我们在页面中添加一个按钮，点击打印字体列表。
2026-02-06 10:36:12
178
原创 zebra通过zpl语言实现中文打印（二）
1：barcodeData（条形码，它的数据源是cardNo），zpl有专门的指令生成条形码和二维码。代码中^BY2开头其实就是在告诉打印机生成条形码。根据我们封装的usePrint这个hooks，我们下一步要做的就是封装一个打印的函数，方便在任意地方调用。找到打印机以后通过打印机对象的send方法发送zpl指令代码。中间我们做了很多的其他逻辑。前端代码要让打印机执行，比如要通过把前端要输出的数据塞到ZPL语言中，zpl语言是打印机能识别的指令语音。当然你可以根据自己的需求动态更改你要输出的数据。
2026-02-05 16:52:31
311
原创 zebra通过zpl语言实现中文打印（一）
引入broswerPrint.js后我们需要先判断是否能正常连接到打印机，这里我们封装一个hooks。1zerbra打印机（我测试的这块是zd888）默认不支持中文，如果要打印中文需要先加载中文字体。这里有一篇官方的文章介绍如何加载中文。主要是通过zebra的官方工具。这里每次在打印的时候先判断下是否正常连接，然后做具体业务逻辑。2 我们需要引入zebra封装的js包：（需要官网下载）比如我在某个列表页面中要打印，只需要这样。
2026-02-05 16:36:26
352
原创 如何在vue3+ts项目中实现zebra扫描枪扫码效果
注意，这里 const SCANNER_PREFIXES = ['A|', 'B|', 'C|', 'D|', 'E|', 'F|'] as const的目的是为了区分不同的扫描枪。扫描枪扫码以后得到的数据前会出现A|xxxx,B|xxxxx等。比如扫描枪一设置返回的数据前缀为A|，那么扫描枪1最后通过扫码的结果就是A|XXX,,扫描枪二同理...这时我们在代码里就可以区分不同的扫描枪。让他们去做不同的业务逻辑。这里的代码是当用户关闭定位在输入框时，可以自动填充扫码枪的结果。1实现一个hooks。
2026-02-03 19:07:26
211
原创 zebra扫描枪开发踩坑
1在基于vue3+ts的项目中，封装hooks但是通过测试发现根本扫码的结果不显示，成功的回到无法执行。但是handleKeyDown函数末尾 console.log('codeBuffer', codeBuffer)却有结果，如下图if (event.key === 'Enter') 的逻辑根本没有执行。问题在哪里？
2026-01-23 14:27:33
398
原创 konva实现canvas画图基础版本
console.log('拖拽结束，原始点:', dragStartPoints, '结束点:', dragEndPoints);console.log('执行撤销操作:', operation.type, '剩余历史:', history.length);// 保持透明度不变。
2025-12-16 10:29:18
375
原创 通过下载nvm安装了node，但是在vscode编辑器的终端执行node -v报错：
node不是无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。此后当前用户的所有 PowerShell 会话都能运行本地脚本，npm、npx 等不再报错。
2025-12-05 11:29:36
176
原创 vue3中返回带参数如何实现？
1如果想在B页面返回时操作A页面中的数据。A页面中定义的数据（可以是ref对象或者函数）必须要通过defineExpose（）出去。否则prevPage.$vm拿不到。因为vue3默认内部都是私有的。2 如果是A页面中定义的对象是通过ref()定义的，在B页面修改时无需.value；1 利用$vm对象。直接获取上一个页面对象的实例，直接操控该页面中的数据进行更改。
2025-09-23 16:02:23
401
原创 uniapp表单
2 自定义验证函数不是validate而是validateFunction。1 表单验证绑定的数据key不是：model而是 :modelValue。3 单独对某个表单元素设定blur事件期望通过表单本身去做验证写法。
2025-08-27 09:44:10
302
原创 如何在uniapp中实现一个表格组件？
3 支持自定义样式和自定义操作。比如修改列数据内容样式，上图中年龄做了自定义的处理，点击某列内容可以自定义操作。2 表格头支持勾选功能，并且支持配置。通过配置显示或隐藏该功能。1 表格头自定义列。
2025-01-16 13:43:31
1786
原创 uniapp中实现一个tree组件
原本打算通过递归实现，发现在小程序开发者工具中只能展示一级。最后采用了另外一种思路。把所有数据全部拍平根据是否有children自动缩进形成层级效果。
2025-01-02 15:35:20
1836
原创 vue3中自定义组件的双向绑定
const localValue = props.modelValue 这里不要用const localValue =ref( props.modelValue)同时，更改子组件里input的值以后，父组件的数据格式变成了{id:"0001",num:3,value:{d:"0001",num:3,}},我们通过一个简单的实例来看看。这时候当我们更改子组件中input的值的时候父组件的值也会同步更改。第二种解法其实同理，只不过父子组件中双向同步的不是一个具体的num值而是一个对象。这里3是更改以后的值。
2024-12-17 21:58:20
437
原创 基于Vue3写一个uniapp的弹窗
注意：自定义弹窗在长列表情况下会出现弹窗遮罩滚动内容依然可以滚动的情况。这时候只需要通过meta-page来控制即可。
2024-12-04 14:54:42
943
原创 uniapp中scrollview配合swiper实现一个简单的tab标签页
1横向滚动的动画效果主要依靠scrollview自带的croll-with-animation="true"来设置。2 而底部下划线则是给当前激活的tab设置伪元素来实现。
2024-11-30 21:51:11
769
原创 element-plus弹窗二次封装踩坑
但是我们考虑一个场景，就是表单弹窗复用。这时候我们手动传属性标识是编辑还是新增就很麻烦。有一个简单的办法就是我们在关闭弹窗时直接把它销毁，这样每次我们只需要在生命周期的onMounted中判断是否有id传过来就可以了。在组件内部，我们通过定义visible，初始状态和props.modelValue绑定，后续跟新在watch里同步，这样就可以实现每次销毁和挂载。这一版的特点就是弹窗的关闭时其实本身没有销毁。我们是通过双向绑定跟新了弹窗的状态。1 基于element-plus的二次封装弹窗很常见。
2024-11-27 22:32:35
424
原创 element中封装axios如何实现请求函数自定义loading
我们的目的是想实现一个基于axios封装的函数，可以传入一个参数loading，当参数为true时，显示加载动画。不传时则不显示loading。
2024-11-16 22:59:11
594
原创 element-plus中踩坑记录
（1）给el-anchor设置container属性。表示要控制哪个容器滚动。（2）一定要给容器添加高度。1关于锚点定位组件。
2024-11-10 09:57:43
2345
原创 关于vue3中如何实现多个v-model的自定义组件
实现自定义组件<User v-model="userInfo" v-model:gender="gender"></User>
2024-10-21 21:28:25
540
原创 arkts中状态管理
(2) 在当前页面通过localstorage的app定义一个storage对象并传入entry装饰器函数中。（1）在entryAbility.ets中定义localstorage变量。（3）在当前页面中定义一个变量别名作为localstorage变量的引用。1 arkts中localstorage的使用。
2024-07-17 09:43:13
402
原创 uniapp踩坑细节
解决办法（1）给scroll-view设置如下css样式（2）给scroll-view设置enhance属性和:show-scrollbar="false"2 uniapp中定义全局变量需要在根目录的uni.scss文件中定义，通过main.js中引入自定义的scss文件不会编译生效ps: scss文件中定义自定义函数如果带单位的话，需要做如下修改：
2024-03-26 17:41:02
1108
原创 nest小结
同时应用RequestInterceptor和ResponseInterceptor，这样就能实现全局的路由拦截。提示：这里我们是针对某些具体的请求做了拦截处理，包括返回值格式化，如果要对全局所有接口都作统一的处理，这时候我们需要做如下更改。该命令将生成目录interceptor，且包含reqest和response两个函数。nest g middle name (生成中间件)如果header中没有token则会报错，而其他接口则不受影响。以上我们以list接口为例，请求。app.module.ts中。
2024-02-23 15:05:56
623
1
原创 uniapp中封装一个svg转base64的组件
uniapp中由于不支持svg--》base64，同时无法使用h5中atob，这里我们采用js-base64插件实现这样一个组件，只要传人svg的代码即可在uniapp中转为base64，同时支持自定义参数，比如宽度，高度等。我们在组件内部定义了一个函数用于处理px单位的转化，因为style的设置无法实现px自动转为vw。
2024-02-02 17:36:05
1427
原创 基于ts的node项目引入报错归纳
二：TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"解决办法：（注意："ts-node"选项和complierOptions同级）解决办法：去掉pack.json中的type:module。这里通过nodemon运行service.ts报错。
2023-12-19 10:59:11
1715
原创 uniapp+vite+ts+express踩坑总结
2 'Response' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.报错。解决方案：给 { NextFunction,Request,Response } 添加 type 关键词。在package.json中添加type：“module”选项。1 关于引入express包报。
2023-12-13 14:05:01
1477
原创 uniapp中wx.getSystemInfoSync() 或 wx.getSystemInfo() 踩坑
wx.getSystemInfoSync踩坑
2023-12-05 14:03:26
5957
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人