可拖拽分隔面板-- vue-splitpane

carpe diem xt

已于 2024-01-02 18:00:31 修改

阅读量1.4k

点赞数 11

文章标签： vue.js javascript 前端

于 2024-01-02 16:05:14 首次发布

本文链接：https://blog.csdn.net/u_ndefine_d/article/details/135342043

版权

本文介绍了如何在Vue2.0项目中安装并使用兼容至IE10的split-pane组件，实现可拖动的水平和垂直布局，以及如何在main.js中配置和响应resize事件。

摘要由CSDN通过智能技术生成

一、安装（能兼容到ie10+；使用 vue2.0 构建的split - pane组件，可用于创建可拖动的水平和垂直拆分布局，它是垂直水平分割窗口的一个插件）

npm install vue-splitpane

二、在main.js中引用

import SplitPane from 'vue-splitpane'
Vue.component('SplitPane', SplitPane) // 初始化为vue模板

三、使用

<SplitPane
 :min-percent="0"
 :max-percent="50"
 :default-percent="leftVisible ? curSplitPaneLeftWidth : 0"
 split="vertical"
 @resize="onSplitPaneResize"
>
 <template slot="paneL">
   <div
     class="mmc-left-box relative"
     :class="leftVisible ? 'show-fmc-left-visible-btn' : 'hide-fmc-left-hidden-btn'"
   >
     <aside class="mmc-left">
       <slot name="mainTree"></slot>
     </aside>
   </div>
 </template>
 <template slot="paneR">
   <main class="mmc-right">
     <slot name="mainForm"></slot>
   </main>
 </template>
</SplitPane>
onSplitPaneResize(leftWidth) {
  console.log('----- leftVisible ------')
  // curSplitPaneLeftWidth 默认20
  if (leftWidth > 1) {
   this.curSplitPaneLeftWidth = leftWidth
    this.leftVisible = true
  } else {
    this.leftVisible = false
  }
}

四、说明

split: String  拆分类型（垂直拆分：vertical; 水平拆分：horizontal）
min-percent: Number  paneL 的最小占比
max-percent: Number  paneL 的最大占比
resize: Function 事件

slot="paneL" // 左侧插槽
slot="paneR" // 右侧插槽

五、效果图
在这里插入图片描述