Chejianer-lib NPM

chejianer-lib

车件儿前端组件库---一款基于react环境的前端组件库

安装

npm install chejianer-lib

使用说明

import { CJSelect } from 'chejianer-lib';
ReactDOM.render(<CJSelect />, mountNode);

1、CJSelect使用说明

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {CJSelect} from 'chejianer-lib';

//数据源
let options=[
      {
        "A":[
          {
            "brand":"奥迪",
            "brandPicName":"AUDI",
            "brandPicUrl":"http://brand-logo.oss-cn-shanghai.aliyuncs.com/AUDI.png"
          },
          {.....},
          {.....}
        ]
      },
      {.......}
    ]
    
//默认值  
let value = [
  {
    label:'奥迪',
    value:'AUDI'
  },
  {
    label:'别克',
    value:'BUICK'
  },
  {
    label:'比亚迪',
    value:'BYD'
  }
]

export default class App extends Component{
  constructor(props){
        super(props);
        this.cJSelectChange = this.cjSelectChange.bind(this);
  }
  
  cjSelectChange(info){
        console.log("value===",info)
        value = info;
  }
  
  render(){
    return(
      <CJSelect options={options} multiple={true} value={value} defaultValue={value} onChange={this.cjSelectChange} style={{marginTop:50,marginLeft:30}}/>
    )
  }
}

属性说明如下：

属性	说明	类型	默认值
options	数据源	[]	无
multiple	是否多选，true-多选，false-单选	boolean	无
value	指定默认选中的条目	[]	无
defaultValue	指定默认选中的条目	[]	无
onChange	选中子项，或选择框的 value 变化时，调用此函数	function	无
style	组件的全局样式	object	无

2、interface props of CJCirque component

prop name	description	type	default
content	inner content of the cirque	string/ReactNode	content
innerDiameter	inner diameter of the cirque	string/number	110px
innerBgc	inner background color of the cirque	string	white
thickness	thickness of the cirque	string/number	10px
color	cirque color	string	cornflowerblue