zl-arco-comp
Version:
install ``` npm install zl-arco-comp ```
78 lines (57 loc) • 2.55 kB
Markdown
# Vue Arco Design 二次封装组件库
install
```
npm install zl-arco-comp
```
## 组件
### zl-content-box
内容区域组件
zl-content-box Props
| 参数名 | 描述 | 类型 | 默认值 |
| ---------------- | -------------------------- | ----------------- | ------ |
| autoBorderRadius | 是否自动设置内容区域的圆角 | boolean\|Function | false |
| occupiedHeight | 已经被占用的高度 | number | 0 |
### zl-icon
zl-icon Props
| 参数名 | 描述 | 类型 | 默认值 |
| ------ | ----------------------- | ------ | ------ |
| src | 图标链接 | string | '' |
| icon | 图标组件参考arco-design | string | '' |
| size | 图标大小 | string | 12px |
### zl-layout
layout Slots
| 插槽名 | 描述 | 参数 |
| ------- | -------- | ---- |
| header | 头部内容 | - |
| sider | 左侧内容 | - |
| content | 右侧内容 | - |
| footer | 底部内容 | - |
### zl-search-box
Props
| 参数名 | 描述 | 类型 | 默认值 |
| -------------- | -------------------- | -------- | -------- |
| hideLine | 是否隐藏分割线 | boolean | false |
| formItemWidth | 输入框宽度 | string | 14vw |
| openSearchItem | 是否开启自定义筛选项 | boolean | false |
| defaultItem | 默认展示的筛选项 | string[] | () => [] |
### zl-table
Props
| 参数名 | 描述 | 类型 | 默认值 |
| ------------ | ---- | ---- | ------ |
| columns | 表格列 | TableColumnData[] | [] |
| data | 表格数据 | TableData | [] |
| loading | 表格加载状态 | boolean | false |
| scroll | 表格滚动 | { x?: number \| string, y?: number \| string } | undefined |
| noCache | 是否展示自定义列 | boolean | true |
| hideOperate | 是否隐藏操作栏 | boolean | false |
| operateWidth | 表格操作栏宽度 | number | 240 |
| page | 表格分页配置 | number | 1 |
| limit | 表格分页配置 | number | 10 |
| total | 表格分页配置 | number | 0 |
| pagination | 表格分页配置 | PaginationProps | undefined |
| pageSizeOptions | 表格分页配置 | number[] | [10, 20, 50, 100, 200] |
| tableHeaderSplitLine | 表头分割线 | boolean | true |
| 参数名 | 描述 | 类型 | 默认值 |
| ------ | ---- | ---- | ------ |
| | | | |
| | | | |