vue中，页面布局之使用vue-splitpane实现窗格的拆分和调节，类似于flex布局

vue中，页面布局之使用vue-splitpane实现窗格的拆分和调节，类似于flex布局

1、基本介绍

npm地址：https://www.npmjs.com/package/vue-splitpane

安包

npm install vue-splitpane

注册

main.js

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 scoped>
.wrap {
  height: 300px;
}
.paneL {
  background-color: red;
  height: 100%;
  width: 100%;
}
.paneR {
  background-color: pink;
  height: 100%;
  width: 100%;
}
</style>

分割成三列：

效果

代码

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

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

<style scoped>
.wrap {
  height: 300px;
}
.paneL {
  background-color: red;
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
}
.paneK {
  background-color: blue;
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
}
.paneR {
  background-color: pink;
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
}
</style>