panjiachen/vue-split-pane

Split-Pane component built with vue2.0, can be split vertically or horizontally. http://panjiachen.github.io/split-pane/demo/index.html

Vue Split Pane

Split-Pane component built with vue2.0, can be split vertically or horizontally.

Try the demo

How to use?

npm install vue-splitpane

#import
import splitPane from 'vue-splitpane'

# use as global component
Vue.component('split-pane', splitPane);

Example

   <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        B
      </template>
    </split-pane>

  //nested
   <split-pane v-on: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>

Options

Property	Description	type	default
split	the split type	String [horizontal,vertical]	must choose one type
min-percent	paneL max-min-percent	Number	10
max-percent	paneL max-percent	Number	10

vue-split-pane's Issues

ssr 工程使用此插件，运行过程中提示：ReferenceError: document is not defined

Can we add a new function call collapse and expand panel on the left or on the right?

imagin that we wanna use panel for show full screen map, so we need to collapse panel on the left when click on fullscreen

vue3中能用吗？

看不懂为什么要用clearfix这个class

我按照例子做的没有那根分割线。查了代码发现是因为这里的height设为0造成的。不知道这个css类是用来干嘛的。谢谢。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

Hi! Any plans for vue3? )

Have a nice day

当在template中引入其他组件的时候，不会在水平和垂直方向出现滚动条

比如在其中嵌入了一个table组件，调整template大小的时候，发现table的数据就显示不出来了。也就是无法自动适应布局，出现垂直方向或水平方向的滚动条。导致数据显示不全。

关于max-percent一个Hack式的解决方案

在自己定义好的resize方法中重置percent,this.$(children[0])代表vue-split-pane组件
resize() { if (this.$children[0].percent > 40) { this.$children[0].percent = 40 } }

unusable

unusable

Event 'resize' returns undefined / no data

Hello, love how simple and easy to use this is, but I find the "resize" event emitted not very useful as I have to manually write in my own functionality every time. It would be great if it returned an Object with the current percentage of each pane instead!

建议添加检测percent中含有'px'字样的，直接赋值宽度而不是按照百分比

resize is not defined

I got this error:

Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I imported like this:
import splitPane from 'vue-splitpane';

 components : {
    ..
    splitPane : splitPane
    ...
  },

and making use of this template:

<split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        B
      </template>
    </split-pane>

Please advise

动态设置percent的值，且以动画的形式过渡

splitPane能不能提供一个方法，可以直接设定percent的值，以此能够动态改变paneL or paneR的值，然后以动画的形式来过渡。
我简单的看splitPane的源码， defaultPercent貌似并没有参与计算，能不能以此计算defaultPercent，然后通过方法改变这个值，来实现动态的splitPane的比例呢

'resize' is in example, but not documented

Can you include the 'demo' in a sub folder of the project? Additionally, explain how 'resize' should be used, since it is referenced in the example, but not defined.

Vue3版本

我改写了一个Vue3版本，欢迎尝试star👽

Uncaught RangeError: Maximum call stack size exceeded

Chrome报错信息:

Uncaught RangeError: Maximum call stack size exceeded
    at VueComponent.Vue._render (eval at <anonymous> (app.js:723), <anonymous>:3906:7)
    at VueComponent.updateComponent (eval at <anonymous> (app.js:723), <anonymous>:2440:21)
    at Watcher.get (eval at <anonymous> (app.js:723), <anonymous>:2779:25)
    at new Watcher (eval at <anonymous> (app.js:723), <anonymous>:2762:12)
    at mountComponent (eval at <anonymous> (app.js:723), <anonymous>:2444:17)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:7572:10)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:9671:16)
    at init (eval at <anonymous> (app.js:723), <anonymous>:3359:13)
    at createComponent (eval at <anonymous> (app.js:723), <anonymous>:4902:9)
    at createElm (eval at <anonymous> (app.js:723), <anonymous>:4845:9)

请问一下楼主,这个组件要怎么在vue里面用啊,我用vue-cli初始化一个项目,然后新写了一个组件SplitPane.vue:

<template>
  <div>
    <h1>{{ msg }}</h1>
    <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        B
      </template>
    </split-pane>
  </div>
</template>

<script>
export default {
  name: 'splitPane',
  data() {
    return {
      msg: 'Split Pane Demo!'
    }
  },
  methods: {
    resize() {
      console.log('resize')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

然后在main.js里面全局注册组件:

import VueSplitPane from 'vue-splitpane'
Vue.use(VueSplitPane);

路由配置:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import SplitPane from '@/components/SplitPane'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }, {
      path: '/resize',
      name: 'SplitPane',
      component: SplitPane
    }

  ]
})

然后是App.vue:

<template>
  <div id="app">
    <p>导航:
      <router-link to="/">首页</router-link>
      <router-link to="/resize">Spit页面</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

结果就报错,不知道什么情况

本机环境:

Node: v6.9.4
"vue": "^2.3.3",
"vue-router": "^2.3.1"
"vue-splitpane": "^1.0.0",

真心请教楼主,本人新手,非前端,只是项目中恰好需要这么一个东西,所以想请假一下

建议增加max-percent，且只针对paneL，另外需要优化mousemove的边界处理

if (percent > this.minPercent && percent < this.maxPercent) {
    this.percent = percent
} else if (percent < this.minPercent) {
    this.percent = this.minPercent
} else {
    this.percent = this.maxPercent
}