一、组件简介

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

二、Props 参数

属性	说明	类型	可选值	默认值
height	组件高度	number		undefined
draggable	是否可拖拽	boolean		true
flex	左右容器占比,总和为10	object		{ left: 2, right: 8 }

三、Slots 插槽

属性	说明	参数
left	左侧容器模板	{ boxHeight:左侧容器高度 }
right	右侧容器模板	{ boxHeight:右侧容器高度 }
center	中间容器模板	{ boxHeight:中间容器高度 }

四、简单示例

<template>
  <left-right :flex="{ left: 5, right: 5 }">
    <template #left="{ boxHeight }">
      <div :style="{ backgroundColor: 'pink', height: `${boxHeight}px` }"></div>
    </template>
    <template #center="{ boxHeight }">
      <div :style="{ backgroundColor: 'purple', width: '100px', height: `${boxHeight}px` }"></div>
    </template>
    <template #right="{ boxHeight }">
      <div :style="{ backgroundColor: 'skyblue', height: `${boxHeight}px` }"></div>
    </template>
  </left-right>
</template>