条形码生成

条形码内容仅支持数字或字母，不支持中文或特殊符号。

使用场景​本例介绍如何在宜搭中生成条形码。

实现功能​创建自定义页面​

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');}将二维码生成函数拷贝至页面 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' }); }}按钮绑定事件​

实现效果​

在线试玩​