# DropDownList使用说明

## 项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

## DropDownList参数

```
  {
          "title":"测试测试测试测试"  //input框前的文字标识，可为空
            ,"placeholder":"搜索"              /**没有值的时候显示的内容(string)**/
            ,"defaultValue":""  //默认值
            ,"openListView":false    // 是否打开下拉框
            ,"errorStatus":true      // 错误状态
            ,"errorMsg":"出错了~~~！"    //错误信息
            ,multiple: false //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
            ,"children":[
                {
                    "value":0
                    ,"text":"查看详情"
                    ,"isActive":false  //点击效果，默认为false
                    ,"isChecked":false  //是否被选中，默认为false
                }  
                ,{
                    "value":1
                    ,"text":"性质维度"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":2
                    ,"text":"地域维度"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":3
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":4
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } 
            ]               /** MenuItem **/
            ,"hidden":false  //是否显示\
            ,"disabled":false //是否禁用
            ,"required":false  //是否显示必选星号
            ,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
            ,"onClick":function(event, target, val){console.log(val.value)} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
            ,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
            ,"onChange":function(event, target, val){console.log(event);console.log(target);console.log(val);} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
            ,"onFocus":function(event, val){console.log(val)} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
        }
```


## DropDownList调用方法

1.安装npm组件包

```
npm install @beisen/DropDownList --save-dev
```

2.引用组件

  ```
import DropDownList from "@beisen/DropDownList"
  ```
3.传入参数

  该参数为上述参数，传入方式使用: {...参数}

  ```
  {
      "title":"测试测试测试测试"  //input框前的文字标识，可为空
        ,"placeholder":"搜索"              /**没有值的时候显示的内容(string)**/
        ,"defaultValue":""  //默认值
        ,"openListView":false    // 是否打开下拉框
        ,"errorStatus":true      // 错误状态
        ,"errorMsg":"出错了~~~！"    //错误信息
        ,multiple: false //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
        ,"children":[
            {
                "value":0
                ,"text":"查看详情"
                ,"isActive":false  //点击效果，默认为false
                ,"isChecked":false  //是否被选中，默认为false
            }  
            ,{
                "value":1
                ,"text":"性质维度"
                ,"isActive":false
                ,"isChecked":false
            } 
            ,{
                "value":2
                ,"text":"地域维度"
                ,"isActive":false
                ,"isChecked":false
            } 
            ,{
                "value":3
                ,"text":"包含下属"
                ,"isActive":false
                ,"isChecked":false
            } 
            ,{
                "value":4
                ,"text":"包含下属"
                ,"isActive":false
                ,"isChecked":false
            } 
        ]               /** MenuItem **/
        ,"hidden":false  //是否显示\
        ,"disabled":false //是否禁用
        ,"required":false  //是否显示必选星号
        ,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
        ,"onClick":function(event, target, val){console.log(val.value)} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
        ,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
        ,"onChange":function(event, target, val){console.log(event);console.log(target);console.log(val);} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
        ,"onFocus":function(event, val){console.log(val)} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
    }
  render () {
      return (
        <DropDownList {...this.state.DropDownData} />
      )
    }
  ```