Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    @beisen/DropDownListpublic

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

    install

    npm i @beisen/DropDownList

    Downloadslast 7 days

    9

    version

    0.2.53

    license

    ISC

    last publish

    collaborators

    • avatar