diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index ccf50bcf260..43fd9eeff40 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,11 @@ # CHANGELOG +`NEXT_VERSION` + +### Features + +- `n-split` adds `resize-trigger-hit-size` prop, closes [#7223](https://github.com/tusen-ai/naive-ui/issues/7223). + ## 2.43.1 `2025-09-15` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 7c0e0300828..3413a2fdf67 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,13 @@ # CHANGELOG +## NEXT_VERSION + +`NEXT_VERSION` + +### Features + +- `n-split` 新增 `resize-trigger-hit-size` 属性,关闭 [#7223](https://github.com/tusen-ai/naive-ui/issues/7223) + ## 2.43.1 `2025-09-15` diff --git a/src/split/demos/enUS/index.demo-entry.md b/src/split/demos/enUS/index.demo-entry.md index 366e57f4f79..4bf8d4bec75 100644 --- a/src/split/demos/enUS/index.demo-entry.md +++ b/src/split/demos/enUS/index.demo-entry.md @@ -31,6 +31,7 @@ controlled.vue | pane2-class | `string` | `undefined` | The class name of the second pane. | 2.38.2 | | pane2-style | `Object \| string` | `undefined` | The Style of the second pane | 2.38.2 | | resize-trigger-size | `number` | `3` | Size of the resize trigger. | 2.36.0 | +| resize-trigger-hit-size | `number` | `0` | The hit size of the resize trigger, it's added to the `resize-trigger-size`. | NEXT_VERSION | | size | `string \| number` | `undefined` | Split is the controlled split size, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.38.0, `string` 2.38.2 | | watch-props | `Array<'defaultSize'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. | 2.38.0 | | on-drag-start | `(e: Event) => void` | `undefined` | Callback function when drag start. | 2.36.0 | diff --git a/src/split/demos/zhCN/index.demo-entry.md b/src/split/demos/zhCN/index.demo-entry.md index b416227edee..1c2ea5d3c31 100644 --- a/src/split/demos/zhCN/index.demo-entry.md +++ b/src/split/demos/zhCN/index.demo-entry.md @@ -32,6 +32,7 @@ pixel-value.vue | pane2-class | `string` | `undefined` | 第二个面板的类名 | 2.38.2 | | pane2-style | `Object \| string` | `undefined` | 第二个面板的样式 | 2.38.2 | | resize-trigger-size | `number` | `3` | Split 的分隔条大小 | 2.36.0 | +| resize-trigger-hit-size | `number` | `0` | Split 的分隔条点击区域大小,在 `resize-trigger-size` 的基础上增加 | NEXT_VERSION | | size | `string \| number` | `undefined` | Split 的受控分割大小,为 `number` 类型时应该为 0 ~ 1 之间的值,为 `string` 类型时应该为 `${number}px` 格式 | 2.38.0, `string` 2.38.2 | | watch-props | `Array<'defaultSize'>` | `undefined` | 需要检测变更的默认属性,检测后组件状态会更新。注意:`watch-props` 本身不是响应式的 | 2.38.0 | | on-drag-start | `(e: Event) => void` | `undefined` | 开始拖拽的回调函数 | 2.36.0 | diff --git a/src/split/src/Split.tsx b/src/split/src/Split.tsx index 495222a42c0..439cf9ef1e2 100644 --- a/src/split/src/Split.tsx +++ b/src/split/src/Split.tsx @@ -23,6 +23,10 @@ export const splitProps = { type: Number, default: 3 }, + resizeTriggerHitSize: { + type: Number, + default: 0 + }, disabled: Boolean, defaultSize: { type: [String, Number] as PropType, @@ -85,7 +89,8 @@ export default defineComponent({ return { '--n-bezier': cubicBezierEaseInOut, '--n-resize-trigger-color': resizableTriggerColor, - '--n-resize-trigger-color-hover': resizableTriggerColorHover + '--n-resize-trigger-color-hover': resizableTriggerColorHover, + '--n-resize-trigger-hit-size': `${props.resizeTriggerHitSize}px` } }) const resizeTriggerElRef = ref(null) diff --git a/src/split/src/styles/index.cssr.ts b/src/split/src/styles/index.cssr.ts index db31fb1ec1a..fa78742b864 100644 --- a/src/split/src/styles/index.cssr.ts +++ b/src/split/src/styles/index.cssr.ts @@ -11,10 +11,24 @@ export default cB('split', ` `, [ cM('horizontal', ` flex-direction: row; - `), + `, [ + cE('resize-trigger-wrapper', [ + c('&::after', ` + width: calc(100% + var(--n-resize-trigger-hit-size)); + height: 100%; + `) + ]), + ]), cM('vertical', ` flex-direction: column; - `), + `, [ + cE('resize-trigger-wrapper', [ + c('&::after', ` + width: 100%; + height: calc(100% + var(--n-resize-trigger-hit-size)); + `) + ]), + ]), cB('split-pane-1', ` overflow: hidden; `), @@ -22,6 +36,16 @@ export default cB('split', ` overflow: hidden; flex: 1; `), + cE('resize-trigger-wrapper', ` + position: relative; + `, [ + c('&::after', ` + content: ''; + position: absolute; + inset: 50%; + transform: translate(-50%, -50%); + `) + ]), cE('resize-trigger', ` background-color: var(--n-resize-trigger-color); transition: background-color .3s var(--n-bezier);