From a803ba7786f8ae3b54f4c6b949717e00282cc63d Mon Sep 17 00:00:00 2001 From: Jecyu Date: Tue, 28 Sep 2021 23:04:54 +0800 Subject: [PATCH] =?UTF-8?q?feat(splitter):=20=E6=B7=BB=E5=8A=A0=20disabled?= =?UTF-8?q?BarSize=20=E7=89=B9=E6=80=A7=E3=80=81API=20=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/splitter/src/splitter-bar-type.tsx | 16 ++++++++---- devui/splitter/src/splitter-bar.tsx | 5 ++-- devui/splitter/src/splitter-types.ts | 17 +++++++++---- docs/components/splitter/index.md | 32 +++++++++++++++++++++++- 4 files changed, 57 insertions(+), 13 deletions(-) diff --git a/devui/splitter/src/splitter-bar-type.tsx b/devui/splitter/src/splitter-bar-type.tsx index e7ac1e23..8d245b43 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 b48aa196..abdc6210 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 73467eb8..8bf2ec19 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 802fdf98..c231ea9e 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 是否折叠 | [基本用法](#基本用法) | -- Gitee