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 |

| 参数名 | 描述 | 类型 | 默认值 | | ------ | ---- | ---- | ------ | | | | | | | | | | |