Vue.js可调整大小的拆分窗格– vue-multipane

Vue.js可调整大小的拆分窗格– vue-multipane
插件名称 vue-multipane
发布时间 2020年12月22日
插件作者 yansern

vue-multipane是Vue.js组件,用于创建响应式,可调整大小的水平/垂直拆分面板。

特征:

  • 使用CSS3 Flexbox。
  • 支持垂直和水平布局。
  • 支持固定和流动窗格。
  • 使用CSS配置一切!

安装和下载:

$ npm install vue-multipane

使用

首先,导入vue-multipane您的Vue组件。

import { Multipane, MultipaneResizer } from 'vue-multipane';

export default {
  // ...
  components: {
    MultiPane,
    MultiPaneResizer
  }
}

然后,使用多窗格组件构建拆分窗格布局。

<multipane>
  <div>Pane 1</div>
  <multipane-resizer></multipane-resizer>
  <div>Pane 2</div>
  <multipane-resizer></multipane-resizer>
  <div>Pane 3</div>
</multipane>