Split 分割线

使用

import { KSplit } from "@ksware/ksw-ux";

用于分割面板内容。

基础用法

使用v-model指定初始分割比例。

横纵方向

使用direction指定分割线方向。

容器类型

使用component指定容器类型。

自定义初始化比例

在不使用v-model指定初始分割比例，可使用defaultSize设置面板初始分割比例。

嵌套

限制拖动范围

使用min和max限制拖动范围。

禁用拖动

使用disabled禁止拖动

自定义分割线

使用triggerIcon自定义分割线图标。

隐藏图标

使用showTrigger隐藏分割线图标。

API

Props

参数名	描述	类型	默认值
v-model / modelValue	绑定左右面板比例（目前只支持px和0-1之间的数字，不支持rem以及百分比等单位）	number | string	-
default-size	初始左右面板比例（目前只支持px和0-1之间的数字，不支持rem以及百分比等单位）	number | string	0.5
component	面板容器	string	'div'
direction	分割线方向	'horizontal' | 'vertical'	'horizontal'
min	左侧面板最小宽度	boolean	-
max	左侧面板最大宽度	boolean	-
disabled	是否禁用	boolean	false
trigger-icon	分割线图标	string | Component	-
show-trigger	是否显示分割线图标	boolean	true
pane1-class	左侧面板类名	string	-
pane2-class	右侧面板类名	string	-
pane1-style	左侧面板样式	CSSProperties	-
pane2-style	右侧面板样式	CSSProperties	-

Events

事件名	描述	类型
move-start	分割线开始拖动时触发	Function
moving	分割线拖动中触发	Function
move-end	分割线结束拖动时触发	Function

Slots

插槽名	描述	参数
first	左侧面板内容	-
second	右侧面板内容	-
trigger	分割线	-
trigger-icon	分割线图标	-

贡献者

周韩杰