@beisen-cmps/drop-down-list

平台drop-down-list组件

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen-cmps/drop-down-list
Minified + gzip package size for @beisen-cmps/drop-down-list in KB

Readme

DropDownList使用说明

项目运行

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

  2. npm run dev (开发环境打包 port:8080)

  3. npm run test (测试用例)

  4. npm run build (生产环境打包)

DropDownList参数

  {
            "title":"title"  //input框前的文字标识,可为空
            // ,"placeholder":""              /**没有值的时候显示的内容(string)**/
            ,"defaultValue":"111111"  //默认值
            ,"errorStatus": false
            ,"errorMsg":"出错了~~~!"
            ,"helpMsg":"312321"
            ,"hasClosebtn":true
            ,"multiple": true //下拉菜单为单选或者多选,true为多选,false为单选,默认为false
            ,"hasInput": true //多选时是否显示input
            ,"showInput": true //当有数据时且为true时不渲染input
            ,"lablePos": true //label位置,true时在左边,false在上边
            ,"lableTxt": false //label中文字对齐方式,true左对齐,false右对齐
            ,"children":[
                {
                    "value":0
                    ,"text":"查看详情"
                    ,"isActive":false
                    ,"isChecked":false
                }  
                ,{
                    "value":1
                    ,"text":"性质维度"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":2
                    ,"text":"地域维度"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":3
                    ,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":4
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                },{
                    "value":5
                    ,"text":"包含下属1"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":6
                    ,"text":"包含下属2"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":7
                    ,"text":"包含下属3"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":8
                    ,"text":"包含下属4"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":9
                    ,"text":"包含下属5"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":10
                    ,"text":"包含下属6"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":11
                    ,"text":"包含下属7"
                    ,"isActive":false
                    ,"isChecked":false
                }  
            ]               /** MenuItem **/
            ,"hidden":false  //是否显示\
            ,'hasEmptyData':true  // 在列表中新增一条数据 “空 (未填写)”,默认为false
            ,'autoShowPanel':true //当获取异步数据会自动渲染
            ,"showPanel": false  //渲染下拉列表
            ,"disabled":false //是否禁用
            ,"readonly":false
            ,"required":true  //是否显示必选星号
            ,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
            ,"onClick":function(event, target, val){console.log(val)} /**点击后事件回调;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('focuse')
                self.test2();
            } /**获取焦点后事件回调event:事件,val:抛出的input中的值**/
            ,"onClose":function(status){console.log(status)}
        }

DropDownList调用方法

1.安装npm组件包

npm install @beisen/dropdown-list --save-dev

2.引用组件

import DropDownList from "@beisen/dropdown-list"

3.传入参数

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

{
          "title":"title"  //input框前的文字标识,可为空
          // ,"placeholder":""              /**没有值的时候显示的内容(string)**/
          ,"defaultValue":"111111"  //默认值
          ,"errorStatus": false
          ,"errorMsg":"出错了~~~!"
          ,"helpMsg":"312321"
          ,"hasSearch":false //是否显示下拉框
          ,"PromptMsg":"PromptMsg" //提示问题
          ,"hasClosebtn":true //是否显示Input框上的 删除按钮
          ,"limitCount": 5 //限制选择数量,当超过该数量后,其它的则禁用
          ,"multiple": true //下拉菜单为单选或者多选,true为多选,false为单选,默认为false
          ,"hasInput": true //多选时是否显示input
          ,"showInput": true //当有数据时且为true时不渲染input
          ,"lablePos": true //label位置,true时在左边,false在上边
          ,"lableTxt": false //label中文字对齐方式,true左对齐,false右对齐
          ,"children":[
              {
                  "value":0
                  ,"text":"查看详情"
                  ,"isActive":false
                  ,"isChecked":false
              }  
              ,{
                  "value":1
                  ,"text":"性质维度"
                  ,"isActive":false
                  ,"isChecked":false
                  ,"onlyShowInput":true //该参数为true的话,该数据仅在多选的input框中显示,不在下拉中显示
              } 
              ,{
                  "value":2
                  ,"text":"地域维度"
                  ,"isActive":false
                  ,"isChecked":false
              } 
              ,{
                  "value":3
                  ,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
                  ,"isActive":false
                  ,"isChecked":false
              } 
              ,{
                  "value":4
                  ,"text":"包含下属"
                  ,"isActive":false
                  ,"isChecked":false
              },{
                  "value":5
                  ,"text":"包含下属1"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":6
                  ,"text":"包含下属2"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":7
                  ,"text":"包含下属3"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":8
                  ,"text":"包含下属4"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":9
                  ,"text":"包含下属5"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":10
                  ,"text":"包含下属6"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":11
                  ,"text":"包含下属7"
                  ,"isActive":false
                  ,"isChecked":false
              }  
          ]               /** MenuItem **/
          ,"hidden":false  //是否显示\
          ,'autoShowPanel':true //当获取异步数据会自动渲染
          ,"showPanel": false  //渲染下拉列表
          ,"disabled":false //是否禁用
          ,"readonly":false
          ,"required":true  //是否显示必选星号
          ,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
          ,"onClick":function(event, target, val){console.log(val)} /**点击后事件回调;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('focuse')
              self.test2();
          } /**获取焦点后事件回调event:事件,val:抛出的input中的值**/
          ,"onClose":function(status){console.log(status)}
      }
render () {
    return (
      <DropDownList {...this.state.DropDownData} />
    )
  }

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.