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

使用vue-splitpane实现可调整面板大小的内容分割功能

原创

已于 2023-09-01 16:04:39 修改 · 6.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2023-02-02 10:24:09 首次发布

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

首先看效果

使用


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>
        &