窗格布局

vue-multipane

安装

npm install vue-multipane -S

使用

<template>
  <Multipane class="foo" layout="vertical">
    <div :style="{ width: '100px', maxWidth: '200px' }">Pane 1</div>
    <MultipaneResizer></MultipaneResizer>
    <div :style="{ width: '25%', maxWidth: '50%' }">Pane 2</div>
    <MultipaneResizer></MultipaneResizer>
    <div :style="{ flexGrow: 1 }">Pane 3</div>
  </Multipane>
</template>

<script>
import { Multipane, MultipaneResizer } from "vue-multipane";
export default {
  components: {
    MultiPane,
    MultiPaneResizer,
  },
};
</script>

<style lang="scss" scoped>
.multipane.foo.layout-v .multipane-resizer {
  margin: 0;
  left: 0; /* reset default styling */
  width: 15px;
  background: blue;
}

.multipane.foo.layout-h .multipane-resizer {
  margin: 0;
  top: 0; /* reset default styling */
  height: 15px;
  background: blue;
}
</style>

Options

Multipane

属性	描述	类型	默认值
layout	确定窗格的布局。	String [vertical, horizontal]	vertical

Events

事件	描述	返回值
paneresizestart	当用户单击调整大小控点以开始调整窗格大小时。	pane, container, size
paneresize	当用户调整窗格大小时。	pane, container, size
paneresizestop	当用户释放调整大小控点以停止调整窗格大小时。	pane, container, size