vue---splitpane分割

使用splitpane可以对窗口进行拆分,这个splitpane组件还是比较好用的,

首先安装:

npm install vue-splitpane

引入使用:

import splitPane from vue-splitpane
Vue.component(split-pane, splitPane);

分割成两列:

<split-pane v-on:resize="resize" :min-percent=20 :default-percent=30 split="vertical">
  <template slot="paneL">
    A
  </template>
  <template slot="paneR">
    B
  </template>
</split-pane>

分割成三列:

<split-pane v-on:resize="resize" :min-percent=20 :default-percent=30 split="vertical">
  <template slot="paneL">
    A
  </template>
  <template slot="paneR">
    <split-pane split="horizontal">
      <template slot="paneL">
       B
      </template>
      <template slot="paneR">
        C
      </template>
    </split-pane>
  </template>
</split-pane>

参考文档:https://www.npmjs.com/package/vue-splitpane

文章来自:https://www.cnblogs.com/e0yu/p/10906900.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3