一、组件简介

• TopDown 是对 vue-splitpane (opens new window) 的二次封装
• TopDown 是一个布局组件，用于实现可拖拽的上下布局

二、Props 参数

属性	说明	类型	可选值	默认值
height	组件高度	number		undefined
draggable	是否可拖拽	boolean		true
flex	上下容器占比,总和为10	object		{ top: 5, down: 5 }

三、Slots 插槽

属性	说明	参数
top	上方容器模板	{ topHeight:上方容器高度 }
down	下方容器模板	{ downHeight:下方容器高度 }

四、简单示例

<template>
  <top-down :flex="{ top: 5, down: 5 }" :height="600">
    <template #top="{ topHeight }">
      <div :style="{ backgroundColor: 'pink', height: `${topHeight}px` }"></div>
    </template>
    <template #down="{ downHeight }">
      <div :style="{ backgroundColor: 'skyblue', height: `${downHeight}px` }"></div>
    </template>
  </top-down>
</template>