From 09bcfcb71c802da05847b048faf2fc76ebba84ab Mon Sep 17 00:00:00 2001 From: Linzp Date: Wed, 29 Oct 2025 16:17:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0render=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 31 ++++++++++++++++++------------- doc/api.md | 31 ++++++++++++++++++------------- package.json | 2 +- src/index.js | 16 +++++++++++----- 4 files changed, 48 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 1630798..4d47261 100644 --- a/README.md +++ b/README.md @@ -113,19 +113,24 @@ render(); ### API 文档 -| 属性 | 类型 | 默认值 | 说明 | -|------|------|--------|------| -| `columns` | `Array` | `[]` | 列配置数组，每列包含 `name`（唯一标识）、`title`（标题）、`color`（颜色）等属性。 | -| `readOnly` | `boolean` | `false` | 是否只读模式，禁止用户调整列占比。 | -| `disabled` | `boolean` | `false` | 是否禁用模式，禁止用户交互。 | -| `onChange` | `Function` | - | 列占比变化时的回调函数，参数为调整后的占比对象。 | +| 属性 | 类型 | 默认值 | 说明 | +|----------------|-----------------|--------------------------------------------------------|----| +| `columns` | `Array` | 列配置数组，每列包含 `name`、`title`、`min`、`max`、`color` 等属性。 | +| `className` | `string` | 自定义组件类名。 | +| `renderItem` | `Function` | 自定义列内容渲染函数，参数为 `{ item, value, valueStr, el, index }`。 | +| `readOnly` | `boolean` | 是否只读模式，禁止调整列宽。 | +| `disabled` | `boolean` | 是否禁用模式，禁止调整列宽。 | +| `defaultValue` | `Object` | 当前列宽比例值，键为列名，值为比例（0-1）非受控模式。 | +| `value` | `Object` | 当前列宽比例值，键为列名，值为比例（0-1）。 | +| `onChange` | `Function` | 列宽调整回调函数，参数为调整后的 `value` 对象。 | ### 列配置 (`columns`) -| 属性 | 类型 | 默认值 | 说明 | -|------|------|--------|------| -| `name` | `string` | - | 列的唯一标识。 | -| `title` | `string` | - | 列的标题。 | -| `color` | `string` | - | 列的颜色（支持 CSS 颜色值）。 | -| `min` | `number` | - | 列的最小占比（0-1）。 | -| `max` | `number` | - | 列的最大占比（0-1）。 | +| 属性 | 类型 | 默认值 | 说明 | +|----------|------------|----------------------------|-------------------| +| `name` | `string` | - | 列的唯一标识。 | +| `title` | `string` | - | 列的标题。 | +| `color` | `string` | - | 列的颜色（支持 CSS 颜色值）。 | +| `min` | `number` | - | 列的最小占比（0-1）。 | +| `max` | `number` | - | 列的最大占比（0-1）。 | +| `render` | `Function` | 自定义列值渲染函数，参数为 `{ value }`。 | diff --git a/doc/api.md b/doc/api.md index b8ee7dd..3966c89 100644 --- a/doc/api.md +++ b/doc/api.md @@ -1,18 +1,23 @@ ### API 文档 -| 属性 | 类型 | 默认值 | 说明 | -|------|------|--------|------| -| `columns` | `Array` | `[]` | 列配置数组，每列包含 `name`（唯一标识）、`title`（标题）、`color`（颜色）等属性。 | -| `readOnly` | `boolean` | `false` | 是否只读模式，禁止用户调整列占比。 | -| `disabled` | `boolean` | `false` | 是否禁用模式，禁止用户交互。 | -| `onChange` | `Function` | - | 列占比变化时的回调函数，参数为调整后的占比对象。 | +| 属性 | 类型 | 默认值 | 说明 | +|----------------|-----------------|--------------------------------------------------------|----| +| `columns` | `Array` | 列配置数组，每列包含 `name`、`title`、`min`、`max`、`color` 等属性。 | +| `className` | `string` | 自定义组件类名。 | +| `renderItem` | `Function` | 自定义列内容渲染函数，参数为 `{ item, value, valueStr, el, index }`。 | +| `readOnly` | `boolean` | 是否只读模式，禁止调整列宽。 | +| `disabled` | `boolean` | 是否禁用模式，禁止调整列宽。 | +| `defaultValue` | `Object` | 当前列宽比例值，键为列名，值为比例（0-1）非受控模式。 | +| `value` | `Object` | 当前列宽比例值，键为列名，值为比例（0-1）。 | +| `onChange` | `Function` | 列宽调整回调函数，参数为调整后的 `value` 对象。 | ### 列配置 (`columns`) -| 属性 | 类型 | 默认值 | 说明 | -|------|------|--------|------| -| `name` | `string` | - | 列的唯一标识。 | -| `title` | `string` | - | 列的标题。 | -| `color` | `string` | - | 列的颜色（支持 CSS 颜色值）。 | -| `min` | `number` | - | 列的最小占比（0-1）。 | -| `max` | `number` | - | 列的最大占比（0-1）。 | \ No newline at end of file +| 属性 | 类型 | 默认值 | 说明 | +|----------|------------|----------------------------|-------------------| +| `name` | `string` | - | 列的唯一标识。 | +| `title` | `string` | - | 列的标题。 | +| `color` | `string` | - | 列的颜色（支持 CSS 颜色值）。 | +| `min` | `number` | - | 列的最小占比（0-1）。 | +| `max` | `number` | - | 列的最大占比（0-1）。 | +| `render` | `Function` | 自定义列值渲染函数，参数为 `{ value }`。 | \ No newline at end of file diff --git a/package.json b/package.json index 3549410..54de813 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/column-split", - "version": "1.0.1", + "version": "1.0.2", "description": "通过拖动分隔条分配元素占比", "syntax": { "esmodules": true diff --git a/src/index.js b/src/index.js index de7baaf..aa77851 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ import useControlValue from '@kne/use-control-value'; import { MoreOutlined } from '@ant-design/icons'; import style from './style.module.scss'; -const ColumnSplit = ({ columns = [], className, readOnly, disabled, ...props }) => { +const ColumnSplit = ({ columns = [], className, renderItem, readOnly, disabled, ...props }) => { const [value, onChange] = useControlValue(props); if (columns.length === 0) { return null; @@ -41,6 +41,13 @@ const ColumnSplit = ({ columns = [], className, readOnly, disabled, ...props }) > {columns.map((column, index) => { const itemValue = get(value, column.name) || 1 / columns.length; + const valueStr = typeof column.render === 'function' ? column.render({ value: itemValue }) : `${Math.round(100 * itemValue)}%`; + const el = ( + + {column.title} + {valueStr} + + ); return ( - - {column.title} - {`${Math.round(100 * itemValue)}%`} +
+ {typeof renderItem === 'function' ? renderItem({ item: column, value: itemValue, valueStr, el, index }) : el} {index < columns.length - 1 && ( @@ -65,7 +71,7 @@ const ColumnSplit = ({ columns = [], className, readOnly, disabled, ...props }) )} - +
); })}