实用工具 - 条形码生成
条形码内容仅支持数字或字母,不支持中文或特殊符号。
1. 使用场景
本例介绍如何在宜搭中生成条形码。
2. 实现功能
2.1 创建自定义页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1684291363745-36c9b013-95c5-4ff8-9c3b-d29a59b13d0c.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1684291381058-8c94ac06-78c9-4bb4-a82b-957a0bc38bb8.png)
2.2 didMount 加载 jsbarcode
// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
console.log(`「页面 JS」:当前页面地址 ${location.href}`);
// console.log(`「页面 JS」:当前页面 id 参数为 ${this.state.urlParams.id}`);
// 更多 this 相关 API 请参考:https://www.yuque.com/yida/support/ocmxyv#OCEXd
// document.title = window.loginUser.userName + ' | 宜搭';
this.utils.loadScript('https://g.alicdn.com/code/lib/jsbarcode/3.11.5/JsBarcode.all.min.js');
}
2.3 将二维码生成函数拷贝至页面 JS 中
该函数接受条形码内容(text:String),返回生成的条形码链接。
// 生成条形码
export function createBarcode(text = '') {
try {
if (!text) {
this.utils.toast({
title: '条形码无内容',
type: 'error'
});
return '';
};
if (!(/^[0-9a-zA-Z]+$/).test(text)) {
this.utils.toast({
title: '条形码内容仅支持数字或字母,不支持中文或特殊符号',
type: 'error'
});
return '';
};
if (!document.getElementById('barcodeRootDom')) {
// 若没有 barcodeRootDom 则创建一个
const barcodeRoot = document.createElement('img');
barcodeRoot.setAttribute('id', 'barcodeRootDom');
barcodeRoot.style.display = 'none';
window.document.body.appendChild(barcodeRoot);
};
document.getElementById('barcodeRootDom').setAttribute('src', ''); // 清空内容
const barcode = JsBarcode('#barcodeRootDom', text, {
format: 'CODE128', // 条形码的格式
width: 2, // 线条宽度
height: 50, // 条码高度
lineColor: '#000', // 线条颜色
displayValue: true, // 是否显示文字
margin: 2 // 设置条形码周围的空白区域
});
const barcodeUrl = document.getElementById('barcodeRootDom').getAttribute('src');
return barcodeUrl;
} catch (error) {
console.error(error);
this.utils.toast({
title: '条形码生成失败',
type: 'error'
});
}
}
2.4 按钮绑定事件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1684291456690-57f7b0d1-6d47-4438-93e1-6a67fcab3f8e.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1684292220633-3a89af86-42e6-4bec-91b8-c1b4de05e69c.png)
3. 实现效果
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1684291497127-2ccaec7e-1dee-4736-90e4-f9f4f60dd273.png)
4. 在线试玩
本文档对您是否有帮助?