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

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

首先看效果

使用

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

属性	属性解释	类型	默认值
split	分割类型	String [horizontal,vertical]	必填项
min-percent	面板最小占比	Number	10
max-percent	面板最小占比	Number	10

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

写在最后

        如果您有任何问题、建议或反馈，欢迎在评论区留言📝，非常愿意听取您的声音。感谢您的阅读，期待与您在未来的博客分享中再次相会🥳！