# @beisen-platform/dropdown-button

> 平台下拉按钮基础组件

Latest version **1.1.13** (published 2019-09-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/dropdown-button
pnpm add @beisen-platform/dropdown-button
yarn add @beisen-platform/dropdown-button
bun add @beisen-platform/dropdown-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.13 |
| Published | 2019-09-11 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 110.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/dropdown-button
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-dropdown-button
- npm.io page: https://npm.io/package/@beisen-platform/dropdown-button

## Dependencies (4)

- [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md)
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)
- [@beisen-platform/common-mount](https://npm.io/package/@beisen-platform/common-mount.md)

## Recent versions

- 1.1.13 (latest) — 2019-09-11
- 1.1.12 — 2019-07-10
- 1.1.11 — 2019-07-09
- 1.1.10 — 2019-05-16
- 1.1.9 — 2019-05-15
- 1.1.8-rc.2 — 2019-05-15
- 1.1.8-rc.1 — 2019-04-29
- 1.1.8 — 2019-04-26
- 1.1.7 — 2019-04-25
- 1.1.6 — 2019-04-18
- 1.1.5 — 2019-04-17
- 1.1.4 — 2019-04-17
- 1.1.3 — 2019-04-17
- 1.1.2 — 2019-04-16
- 1.1.1 — 2019-04-14
- … 22 more at https://npm.io/package/@beisen-platform/dropdown-button/versions

## README

# DropDownButton 使用说明

## 项目运行

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

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

3. npm run test （测试用例）

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

## DropDownButton参数

```javascript
{
  
  /** 下拉按钮上的文字 */
  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.引用组件

  ```javascript
import DropDownButton from "@beisen/dropdown-button"
  ```

3.传入参数

  该参数为上述参数，传入方式使用: {...参数}
  ```javascript
  {
    "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} />
      )
    }
  ```

---
_Source: https://npm.io/package/@beisen-platform/dropdown-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._