基础组件

LeftRight

# 一、简介

LeftRight 是封装的可拖动的左右布局组件。

# 二、效果

http://210.12.53.106:8888/outer/test/LeftRight (opens new window)

# 三、代码示例

# 3.1 基本使用

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

1
2
3
4
5
6
7
8
9
10

# 3.2 中间插槽

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13

TopDown→