React-JsBarcode使用

栏目: IOS · Android · 发布时间: 5年前

内容简介:几种应用:这种是JQuery的.明显不是想要的,略过这种用classname找的方法.好像也不行.

几种应用:

React-JsBarcode使用

这种是JQuery的.明显不是想要的,略过

React-JsBarcode使用

这种用classname找的方法.好像也不行.

React-JsBarcode使用

这种有点不明白.看起来也不是想要的.

React-JsBarcode使用

最后这个才像是需要的.

封装

/**
 * 简单生成条形码
 * {
 * 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>
        );
    }
}

复制代码

期待你的评论,点赞


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The NSHipster Fake Book (Objective-C)

The NSHipster Fake Book (Objective-C)

Mattt Thompson / NSHipster Portland, Oregon / 2014 / USD 19.00

Fake Books are an indispensable tool for jazz musicians. They contain the melody, rhythm, and chord changes for hundreds of standards, allowing a player to jump into any session cold, and "fake it" th......一起来看看 《The NSHipster Fake Book (Objective-C)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具