Vue中 引入使用 vue-splitpane 實現窗格的拆分、調節

1. 安裝及引入

npm地址

npm install vue-splitpane

import splitPane from 'vue-splitpane'
// 註冊爲全局組件
Vue.component('split-pane', splitPane);

屬性說明

屬性	說明	類型	默認值
split	分割類型	String [ horizontal （水平），vertical （垂直） ]	必選一種
min-percent	面板最小百分比	Number	10
max-percent	面板最大百分比	Number	10

2. 使用

分割成兩列：

<template>
  <div class="wrap">
   <split-pane @resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        <!-- 編輯本身的代碼 -->
        <div class="paneL"></div>
      </template>
      <template slot="paneR">
        <!-- 編輯本身的代碼 -->
        <div class="paneR"></div>
      </template>
    </split-pane>
  </div>
</template>

<script>
export default {
  methods: {
    resize(){}
  },
}
</script>

<style lang="stylus" scoped>
.wrap{
  height:300px;
  .paneL{
    background-color:red;
    height:100%;
    width:100%;
  }
  .paneR{
    background-color: pink;
    height:100%;
    width:100%;
  }
}
</style>

效果：

分割成三列：

<split-pane @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>