node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

@beisen/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"          //最大宽度,默认为"" ,超出后,超出的部门显示...
      ,"direction":"right-down"  /**
                                  MenuList spread direction,one of:
                                     1."left-top"
                                     2."right-top"
                                     3."left-down"
                                     4."right-down"
                              **/
      ,"onClick":function(val){console.log(val)} /**点击后时间回调**/
      
    }
 

DropDownButton调用方法

  1. 引用组件
import DropDownButton from "./src/index"
  1. 传入参数

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

render () {
    return (
      <DropDownButton data={this.state.DropdownData} />
    )
  }