提升布局灵活性：掌握Vue中vue-splitpane分割面板的实用技巧_split-pane

项目中遇到内容分割化并且可以让用户自行调整面板大小的需求，即可使用此组件解决

首先看效果

使用

 
npm install vue-splitpane -S
 
// 引入组件库
import splitPane from 'vue-splitpane'
 
// 全局注册
Vue.component('split-pane', splitPane);
 
// 局部注册
components:{
    splitPane
}

demo

<split-pane split="horizontal" @resize="resize" :min-percent="40">
    <template slot="paneL">
        <div class="left-container"></div>
    </template>
    <template slot="paneR">
      <split-pane split="vertical" :min-percent="30">
        <template slot="paneL">
            <div class="top-container"></div>
        </template>
        <template slot="paneR">
            <div class="bottom-container"></div>
        </template>
      </split-pane>
    </template>
</split-pane>

options

说明：在使用过程中 用到max-percent 属性时，发现该属性并不能生效，看源码得知该第三方组件库原本就没有此属性（其实我们可以通过设置相对应侧的最小值解决设置最大值不生效的问题）

写在最后

        如果您有任何问题、建议或反馈，欢迎在评论区留言