# zzl-button

> test

Latest version **0.1.1** (published 2023-03-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install zzl-button
pnpm add zzl-button
yarn add zzl-button
bun add zzl-button
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-03-26 |
| First published | 2023-03-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 赵在林 |
| Maintainers | zhaozailin |

## Links

- npm: https://www.npmjs.com/package/zzl-button
- npm.io page: https://npm.io/package/zzl-button

## Recent versions

- 0.1.1 (latest) — 2023-03-26
- 0.1.0 — 2023-03-26

## README

### 组件描述
用于数据项的拖撰、排序、隐藏、显示、固定等功能设置的组件。

### 应用场景
1. 当应用场景不能完整的展示数据项时，通过触发设置面板来设置优先展示、隐藏或固定数据项。
2. 通常应用于表格列数据项的设置、查询集数据的设置。

### API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | string | '' |
| defaultTips | 默认提示信息 | string | '' |
| data | 面板数据，详情查看下面的`data中元素的API` | array | [] |
| onReset | 重置的回调 | function | - |
| onClose | 关闭的回调 | function | - |
| onChange | 数据设置改变后的回调 | function | - |

#### data中元素的API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| key | 数据组唯一标识 | string | '' |
| label | 数据组名称 | string | '' |
| maxCount | 数据组可包含数据的个数上限，默认无限制 | number | - |

#### list中元素的API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| key | 唯一标识 | string | '' |
| text | 文本 | string | '' |
| checked | 是否勾选，当required或locked为true时，强制为true | boolean | false |
| required | 一直展示，当locked为true时，强制为true | boolean | false |
| locked | 锁定，不可拖拽，不可取消勾选 | boolean | false |
| children | 子级数组 | array | - |

### data数据结构举例

```js
const data = [
  {
    label: '表头固定列',
    maxCount: 3,
    list: [
      {
        key: 'age',
        text: '年龄',
        children: [
          {
            key: 'age-1',
            text: '年龄-1',
          },
          {
            key: 'age-2',
            text: '年龄-2',
          }
        ]
      },
      {
        key: 'status',
        text: '状态',
        required: true,
      },
      {
        key: 'operator',
        text: '操作',
        locked: true,
      }
    ]
  },
  ...
];
```

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