2020-11-20

king

2020-11-20 6e106eb13ce404d9955d6c9045d21050d3e08294

 src/components/barcode/index.jsx

@@ -11,6 +11,10 @@
    value: PropTypes.any,    // 条码值
  }

  state = {
    error: false
  }

  componentDidMount () {
    this.resetBarcode()
  }
@@ -28,22 +32,30 @@

    let style = card.style || {}

    JsBarcode(this.barcode, value, {
      displayValue: card.displayValue === 'true',
      width: card.interval || 1,
      height: card.barHeight || 25,
      margin: 0,
      fontOptions: `${style.fontWeight || ''} ${style.fontStyle || ''}`,
      textAlign: style.textAlign || 'left',
      fontSize: (style.fontSize || 14) + 'px',
      lineColor: style.color || '#000000'
    })
    try {
      JsBarcode(this.barcode, value, {
        displayValue: card.displayValue === 'true',
        width: card.interval || 1,
        height: card.barHeight || 25,
        margin: 0,
        fontOptions: `${style.fontWeight || ''} ${style.fontStyle || ''}`,
        textAlign: style.textAlign || 'left',
        fontSize: (style.fontSize || 14) + 'px',
        lineColor: style.color || '#000000'
      })
      this.setState({error: false})
    } catch {
      this.setState({error: true})
    }

  }

  render() {
    const { error } = this.state

    return (
      <div className="barcode-box">
        {error ? <span className="barcode-error">字符非法或过长！</span> : null}
        <svg ref={(ref) => { this.barcode = ref }}/>
      </div>
    )