美文网首页
antd-mobile 自定义picker按钮样式

antd-mobile 自定义picker按钮样式

作者: 鹅鹅鹅_ | 来源:发表于2018-12-25 16:47 被阅读0次

首先定义picker按钮样式

const CustomChildren = props => (
    <div
      onClick={props.onClick}
      style={{ width: '90px', float: 'right'}}
    >
      <div>
        <div><p align="middle" style={{float: 'left', width: '80%'}}><strong>{props.extra}</strong></p><span style={{float: 'right'}} className="arrow-down"/></div>
      </div>
    </div>
  );

然后使用

<div>
                <Picker data={seasons} cols={1} title={"资金类型"} value={this.state.value} extra={v2label[this.state.value]}
                    // onOk={v => {console.log("onOK=>"+v);this.setState({ type: v })}}
                    onChange={v => {console.log("onOK=>"+v+" "+v2type[v]);this.handleChange(v2type[v]);this.setState({ value: v })}}
                >
                    <CustomChildren/>
                </Picker>
            </div>
效果图

相关文章

网友评论

      本文标题:antd-mobile 自定义picker按钮样式

      本文链接:https://www.haomeiwen.com/subject/pggflqtx.html