Vue中 引入使用 vue-splitpane 实现窗格的拆分调节

Posted 2021-09-04 明天也要努力

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>