node package manager

@beisen/DropDownButton

DropDownButton

DropDownButton 使用说明

项目运行

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

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

  3. npm run test (测试用例)

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

DropDownButton参数

 
  {
    "title":"测试"   //下拉按钮上的文字
    ,"type":"icon"  //下拉按钮上的文字类型 是文本,还是icon
    ,"bsSize":"default"      /**按钮尺寸(string)。参数:
                            1.默认:“default”
                            2.小按钮:“small”
                        **/       
    ,"bsStyle":"default"          /**按钮类型(string)。参数:
                            1.默认:者“default”
                            2.弱化按钮:“weaken”
                        **/
    ,"children":[
        {
            "value":0
            ,"text":"查看详情"
            ,"active":false
            ,"isChecked":false
        }  
        ,{
            "value":1
            ,"text":"性质维度"
            ,"active":false
            ,"isChecked":false
        } 
        ,{
            "value":2
            ,"text":"地域维度"
            ,"active":false
            ,"isChecked":false
        } 
        ,{
            "value":3
            ,"text":"包含下属"
            ,"active":false
            ,"isChecked":true
        } 
        ,{
            "value":4
            ,"text":"不包含下属"
            ,"active":false
            ,"isChecked":false
        }
      ]               /** MenuItem **/
      ,"open":false         /** is open or not 首次渲染列表是否已展开**/   
      ,"disabled":false   //是否禁用
      ,"hidden":false  //是否显示按钮
      ,"iconName":"pc-sys-arrowdown-nomal-svg" //icon图标
      ,"maxWidth":"20px"          //最大宽度,默认为"" ,超出后,超出的部门显示...
      ,"autoDirection":false  //下拉菜单自适应位置 默认为自适应
      ,"direction":"right-down"  /**
                                  MenuList spread direction,one of:
                                     1."left-top"
                                     2."right-top"
                                     3."left-down"
                                     4."right-down"
                              **/
      ,"onClick": function(value,target,onClick,btnInfo) {
          console.log(value);  //输出val
          console.log(target);  //输出e
          console.log(onClick); //输出true
          console.log(btnInfo); //输出this.state
        } /**点击后时间回调**/
      
    }
 

DropDownButton调用方法

1.安装npm组件包

npm install @beisen/DropDownButton --save-dev

2.引用组件

import DropDownButton from "@beisen/DropDownButton"

3.传入参数

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

{
  "title":"测试"   //下拉按钮上的文字
  ,"type":"icon"  //下拉按钮上的文字类型 是文本,还是icon
  ,"bsSize":"default"      /**按钮尺寸(string)。参数:
                          1.默认:“default”
                          2.小按钮:“small”
                      **/       
  ,"bsStyle":"default"          /**按钮类型(string)。参数:
                          1.默认:者“default”
                          2.弱化按钮:“weaken”
                      **/
  ,"children":[
      {
          "value":0
          ,"text":"查看详情"
          ,"active":false
          ,"isChecked":false
      }  
      ,{
          "value":1
          ,"text":"性质维度"
          ,"active":false
          ,"isChecked":false
      } 
      ,{
          "value":2
          ,"text":"地域维度"
          ,"active":false
          ,"isChecked":false
      } 
      ,{
          "value":3
          ,"text":"包含下属"
          ,"active":false
          ,"isChecked":true
      } 
      ,{
          "value":4
          ,"text":"不包含下属"
          ,"active":false
          ,"isChecked":false
      }
    ]               /** MenuItem **/
    ,"open":false         /** is open or not 首次渲染列表是否已展开**/   
    ,"disabled":false   //是否禁用
    ,"hidden":false  //是否显示按钮
    ,"iconName":"pc-sys-arrowdown-nomal-svg" //icon图标
    ,"maxWidth":"20px"          //最大宽度,默认为"" ,超出后,超出的部门显示...
    ,"autoDirection":false  //下拉菜单自适应位置 默认为自适应
    ,"direction":"right-down"  /**
                                MenuList spread direction,one of:
                                   1."left-top"
                                   2."right-top"
                                   3."left-down"
                                   4."right-down"
                            **/
    ,"onClick": function(value,target,onClick,btnInfo) {
        console.log(value);  //输出val
        console.log(target);  //输出e
        console.log(onClick); //输出true
        console.log(btnInfo); //输出this.state
      } /**点击后时间回调**/
  }
 
render () {
    return (
      <DropDownButton {...this.state} />
    )
  }