React JsBarcode使用

瞎扯

百度,google搜了一下,發現不少教怎麼用的,就是沒有封裝組件的.

實際這個東西,用起來仍是很簡單的.

今天正好封裝了個組件.

今天算是寫react的第三個月了.react仍是比較好上手的.

JsBarcode

幾種應用:

這種是JQuery的.明顯不是想要的,略過

---

這種用classname找的方法.感受很差.

---

這種有點不明白.看起來也不是想要的.

---

最後這個纔像是須要的.

封裝

/**
 * 簡單生成條形碼
 * {
 * width: 2,//較細處條形碼的寬度
 * height: 100, //條形碼的寬度，無高度直接設置項，由位數決定，能夠經過CSS去調整，見下
 * quite: 10,
 * format: "CODE128",
 * displayValue: false,//是否在條形碼下方顯示文字
 * font:"monospace",
 * textAlign:"center",
 * fontSize: 12,
 * backgroundColor:"",
 * lineColor:"#000"//條形碼顏色
 * }
 */
class SimpleBarcode extends Component {
    componentDidMount() {
        this.createBarcode();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props !== nextProps) {
            this.createBarcode();
        }
    }

    createBarcode = () => {
        if (!this.barcode) return;
        const {
            width = 1, height = 35, margin = 0, label, displayValue = true,
        } = this.props;
        if (!label) {
            return;
        }
        Barcode(this.barcode, label, {
            displayValue, // 是否由Barcode顯示二維碼下面的值
            width, // 每條線的寬度
            height, // 高度
            margin, //邊距
        });
    };

    render() {
        const {
            labelClassName, label, labelStyle, className, style, displayValue = true,
        } = this.props;
        return (
            <div className={className} style={style}>
                <svg
                    ref={(ref) => {
                        this.barcode = ref;
                    }}
                />
                {displayValue ? null : <p className={labelClassName} style={labelStyle}>{label}</p>} // 自定義樣式的值顯示
            </div>
        );
    }
}

複製代碼

簡單使用

<SimpleBarcode
        label={123123}
        height="45"
        width="1"//這裏只能是大於1的整數
    />
複製代碼

---

期待你的評論,點贊