Tf-react-cpn NPM

tf-react-cpn

常用react组件

组件说明

目前此组件的样式依赖于amazeui，若有需要可自行修改。

DateInput

属性参数：

{
    className:React.PropTypes.string,
    style:React.PropTypes.object,
    name:React.PropTypes.string, //普通name属性
    placeholder:React.PropTypes.string,
    disabled:React.PropTypes.bool,
    required:React.PropTypes.bool,
    onChange:React.PropTypes.func,
    //value:React.PropTypes.string,
    format:React.PropTypes.string, //格式
    type:React.PropTypes.oneOf(['year', 'month', 'week', 'date', 'datetime']),
    fixed:React.PropTypes.bool,
    parent:React.PropTypes.object, //相对定位的父元素
    hideClear:React.PropTypes.bool //是否隐藏“清空”操作
}

SearchSelect

属性参数：

{
    className:React.PropTypes.string,
    style:React.PropTypes.object,
    name:React.PropTypes.string, //普通name属性
    maxItemLength:React.PropTypes.number, //最多显示的匹配条数
    idField:React.PropTypes.string,
    nameField:React.PropTypes.string,
    emptyText:React.PropTypes.string,
    implicitNameField:React.PropTypes.string, //隐式匹配项，如中文人名时可用简拼作为隐式匹配项
    multiple:React.PropTypes.bool,
    list:React.PropTypes.array, //数据源
    //value:React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string, React.PropTypes.array]),
    onChange:React.PropTypes.func.isRequired
}

PullRefresh

DOM结构：

<div id="scrollWrapper" title="这是滚动容器，即overflow:auto。如果滚动容器是整个浏览器窗口，那么这层div就不要了">
    <div id="wrap" title="触发滑动事件的容器">
        <PullRefresh afterPull={this.onRefresh} container="wrap" scrollContainer="scrollWrapper"/>
        <div className="weui-cells margin-top-0" title="这就是个普通的列表，比如：ul">
            {
                list.map((o, i) => <PlaceItem key={i} data={o}/>)
            }
        </div>
    </div>
</div>

属性参数：

{
    container:React.PropTypes.string, //用于触发滑动事件的容器id，一般为PullRefresh组件的相邻父元素
    scrollContainer:React.PropTypes.string, //具有滚动条的容器id，不指定时为document.body，即浏览器窗口；如果是在页面局部容器中下拉刷新则必须指定
    dragThreshold:React.PropTypes.number, // 临界值：当拖动多高时触发正在刷新
    moveCount:React.PropTypes.number, // 位移系数
    beforePull:React.PropTypes.func, // 触发下拉刷新前调用
    afterPull:React.PropTypes.number, // 触发下拉刷新后调用  flag：true代表触发了刷新 flag：false代表没有触发下拉刷新只是拉下马又收回去了
    onRefresh:React.PropTypes.number // 触发下拉刷新回调 可以用来加载数据
}