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} />
    )
  }