DropDownButton 使用说明

项目运行

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

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

DropDownButton参数

{
  
  /** 下拉按钮上的文字 */
  title: '测试测试测试',

  /** 下拉按钮上的文字类型 是文本，还是icon */
  type: 'text',
  
  /** 当type为“text”时可选，true为有图标，false为没有 */
  textIcon: true,

  /**按钮尺寸(string)。参数：
      1.默认:“default”
      2.小按钮：“small”
    */
  bsSize: 'default',

  /**按钮类型(string)。参数：
      1.默认:者'default'
      2.弱化按钮：'weaken'
    */
  bsStyle: 'weaken',

  /** 采用非Button样式,默认为true */
  isBtnStyle: false,

  /** 水平向左偏移的值，为负数则向右偏移 */
  deviationLeft: 140,

  /** 自定义下拉弹层宽度，默认170 */
  panelWidth: '137px',

  /** 自定义弹层居左还是居右，默认false 居左 */
  rightAlign: true,

  /** MenuItem **/
  children: [{
    "value": 0,
    "text": '查看详情查看详情查看详情查看详情',
    "active": false,
    "isChecked": false,
    "isDisabled": true
  }, {
    "value": 1,
    "text": '性质维度',
    "active": false,
    "isChecked": false,
    "isDisabled": false
  }],

  /** is open or not 首次渲染列表是否已展开**/
  open: false,

  /** 是否禁用 */
  disabled: false, //


  /** 是否显示按钮 */
  hidden: false, //

  /** icon图标 */
  iconName: 'pc-sys-dropdownmin-nomal-svg', //

  /** icon图标 */
  activeName: 'pc-sys-dropdownmin-active-svg', //

  /** 最大宽度，默认为'' ,超出后，超出的部分显示... ,仅对文本模式有用 */
  maxWidth: '', //

  /** 下拉菜单自适应位置 */
  autoDirection: true, //

  /** MenuList spread direction, one of:
        1."left-top"
        2."right-top"
        3."left-down"
        4."right-down"
  */
  direction: 'left-down',

  itemClick: function (retFun) {
    let promise = new Promise(function (resolve, reject) {
      //发送请求 获得数据 //成功走下面
      resolve([{
        value: 0,
        text: '查看详情',
        active: false,
        isChecked: false
      }]);
      //失败了 reject()
    });

    promise.then(function (data) {
      retFun(data)
    })
  },

  /** 点击后时间回调 */
  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/dropdown-button --save-dev

2.引用组件

import DropDownButton from "@beisen/dropdown-button"

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, btn) {
        console.log(value);  //输出val
        console.log(target);  //输出e
        console.log(onClick); //输出true
        console.log(btnInfo); //输出this.state
        console.log(btn) // 按钮节点
      } /**点击后时间回调**/
  }

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