diff --git a/devui/splitter/src/splitter-bar-type.tsx b/devui/splitter/src/splitter-bar-type.tsx index e7ac1e231322a5c47e9e25bc859f6b169f90a2aa..8d245b435e1bad8c32b0fe9166b1f70a971fdc59 100644 --- a/devui/splitter/src/splitter-bar-type.tsx +++ b/devui/splitter/src/splitter-bar-type.tsx @@ -1,6 +1,5 @@ -import { PropType, ExtractPropTypes } from 'vue'; -import { SplitterOrientation } from './splitter-types'; - +import { PropType, ExtractPropTypes } from 'vue' +import { SplitterOrientation } from './splitter-types' export const splitterBarProps = { /** @@ -23,12 +22,19 @@ export const splitterBarProps = { type: String, required: true, }, + /** + * 可选,pane 设置不可调整宽度时生效 + */ + disabledBarSize: { + type: String, + default: '1px', + }, /** * 是否显示展开/收缩按钮 */ showCollapseButton: { type: Boolean, }, -} as const; +} as const -export type SplitterBarProps = ExtractPropTypes; +export type SplitterBarProps = ExtractPropTypes diff --git a/devui/splitter/src/splitter-bar.tsx b/devui/splitter/src/splitter-bar.tsx index b48aa1964a8540510f42dcec4080ce18d7af2194..abdc62109994f901935f8a79bccc04acdd20a004 100644 --- a/devui/splitter/src/splitter-bar.tsx +++ b/devui/splitter/src/splitter-bar.tsx @@ -43,8 +43,9 @@ export default defineComponent({ if (!store.isStaticBar(props.index)) { state.wrapperClass += ' resizable' } else { - // TODO 禁用的样式处理 - // console.log(666); + nextTick(() => { + setStyle(domRef.value, { flexBasis: props.disabledBarSize }) + }) } }, { deep: true } diff --git a/devui/splitter/src/splitter-types.ts b/devui/splitter/src/splitter-types.ts index 73467eb868270c6849f052e010a10ded034c235b..8bf2ec19af8fd9ed6718f264599d0690aa6873df 100644 --- a/devui/splitter/src/splitter-types.ts +++ b/devui/splitter/src/splitter-types.ts @@ -1,6 +1,6 @@ -import type { PropType, ExtractPropTypes } from 'vue'; -export type SplitterOrientation = 'vertical' | 'horizontal'; -export type CollapseDirection = 'before' | 'after' | 'both'; +import type { PropType, ExtractPropTypes } from 'vue' +export type SplitterOrientation = 'vertical' | 'horizontal' +export type CollapseDirection = 'before' | 'after' | 'both' export const splitterProps = { /** @@ -17,6 +17,13 @@ export const splitterProps = { type: String, default: '2px', }, + /** + * 可选,pane 设置不可调整宽度时生效 + */ + disabledBarSize: { + type: String, + default: '1px', + }, /** * 是否显示展开/收缩按钮 */ @@ -24,6 +31,6 @@ export const splitterProps = { type: Boolean, default: true, }, -} as const; +} as const -export type SplitterProps = ExtractPropTypes; +export type SplitterProps = ExtractPropTypes diff --git a/docs/components/splitter/index.md b/docs/components/splitter/index.md index 802fdf98e1dfde8fa8d922d3f3afccb2985b5090..c231ea9e9cf85c8ff422f27901d37653142bd961 100644 --- a/docs/components/splitter/index.md +++ b/docs/components/splitter/index.md @@ -305,4 +305,34 @@ export default defineComponent({ ::: -### 折叠收缩显示菜单【TODO】 \ No newline at end of file +### 折叠收缩显示菜单 【TODO】 + +### API + +### d-splitter 参数 + +| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | +| :----------------: | :----------: | :-----------: | :-------------------------------: | :--------------------------------------------- | +| orientation | `'vertical' \| 'horizontal'` | 'horizontal' | 可选,指定 Splitter 分割方向,可选值 'vertical' \| 'horizontal' | [基本用法](#基本用法) +| splitBarSize | `string` | '2px' | 可选,分隔条大小,默认 2px | [基本用法](#基本用法) | +| disabledBarSize | `string` | '1px' | 可选,pane 设置不可调整宽度时生效 | [垂直布局用法](#垂直布局用法) | +| showCollapseButton | `boolean` | true | 可选,是否显示收起/展开按钮 | [折叠收缩显示菜单](#折叠收缩显示菜单) | + +### d-splitter-pane 参数 + +| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | +| :---------------: | :--------: | :------: | :---------------------------------------------------: | :------------------------------------ | +| size | `string` | -- | 可选,指定 pane 宽度,设置像素值或者百分比 | [基本用法](#基本用法) | +| minSize | `string` | -- | 可选,指定 pane 最小宽度,设置像素值或者百分比 | [基本用法](#基本用法) | +| maxSize | `string` | -- | 可选,指定 pane 最大宽度,设置像素值或者百分比 | [基本用法](#基本用法) | +| resizable | `boolean` | true | 可选,指定 pane 是否可调整大小,会影响相邻 pane | [垂直布局用法](#垂直布局用法) | +| collapsible | `boolean` | false | 可选,指定 pane 是否可折叠收起 | [基本用法](#基本用法) | +| collapsed | `boolean` | false | 可选,指定 pane 初始化是否收起,配合`collapsible`使用 | [垂直布局用法](#垂直布局用法) | +| collapseDirection | `'before' \| 'after' \| 'both'` | 'both' | 可选,指定非边缘 pane 收起方向,配合`collapsible`使用 | [指定折叠收起方向](#指定折叠收起方向) + +### d-splitter-pane 事件 + +| 事件 | 类型 | 描述 | 跳转 Demo | +| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------- | +| sizeChange | `EventEmitter` | 大小变动时,返回改变后的值,像素值或者百分比 | [基本用法](#基本用法) | +| collapsedChange | `EventEmitter` | 折叠和展开时,返回当前 pane 是否折叠 | [基本用法](#基本用法) |