Barcode generation

The barcode content only supports numbers or letters, and does not support Chinese or special symbols.

Usage scenarios

This example describes how to generate barcodes in YIDA.

Implement functions

Create a custom page

didMount load 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');
}

Copy the QR code generation function to Page JS

This function accepts the barcode content (text:String) and returns the generated barcode link.

// 生成条形码
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'
    });
  }
}

Button binding event

Effect

Try it online