vue---splitpane分割

使用splitpane能夠對窗口進行拆分,這個splitpane組件仍是比較好用的,vue

首先安裝:npm

npm install vue-splitpane

引入使用:spa

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

分割成兩列:code

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

分割成三列:component

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

相關文章
相關標籤/搜索