Comments (8)
@yimseknyCorarl @kevinelliott
You can achieve this by changing the percent value of the component within a method.
For example:
<template>
<div id="app">
<split-pane ref="example" :min-percent='20' :default-percent='50' split="vertical">
<template slot="paneL">
<div>Left</div>
</template>
<template slot="paneR">
<div>
<button @click="collapse" type="button">Toggle Collapse</button>
</div>
</template>
</split-pane>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
isCollapsed: false
}
},
methods: {
collapse () {
if (this.isCollapsed) {
this.$refs.example.percent = 50;
this.isCollapsed = false;
} else {
this.$refs.example.percent = 0;
this.isCollapsed = true;
}
}
}
}
</script>
from vue-split-pane.
This would be great!
from vue-split-pane.
Is there any way I could achieve the same effect through clicking on
"splitter-pane-resizer vertical" or
"splitter-pane-resizer horizontal"
(the handle bars) directly?
It'd be awesome if I wouldn't need to add another button just for this. Thanks in advance!
from vue-split-pane.
@morph3us-net Without modifying the build itself you would have to add an event listener to the handles to invoke a vue function to modify the percent values. It would be less clean, but wouldn't require a new bundle. Though, it may be easier to pull the project and make an MR
from vue-split-pane.
Thanks for the answer!
I had tried to add an event handler myself, but didnt get far. (If you are interested, I posted on stackoverflow)
Excuse me, but what is a MR?
from vue-split-pane.
@morph3us-net One way, is to add in your mounted() function, an event listener on the pane divider. I haven't tested this, but something like...
mounted () {
document.querySelector('.splitter-pane-resizer.vertical').addEventListener('click', (event) => {
this.$refs.example.percent = 50;
this.isCollapsed = false;
})
}
from vue-split-pane.
And even better if you can remove the event listener when the component is destroyed 👯
from vue-split-pane.
Unfortunately, this does not work at all. I tried to make it print out a console log, but nothing happens.
Thanks for the reply, though.
from vue-split-pane.
Related Issues (16)
- Uncaught RangeError: Maximum call stack size exceeded HOT 2
- 看不懂为什么要用clearfix这个class
- Event 'resize' returns undefined / no data HOT 2
- 关于max-percent一个Hack式的解决方案 HOT 1
- 动态设置percent的值,且以动画的形式过渡 HOT 3
- 当在template中引入其他组件的时候,不会在水平和垂直方向出现滚动条 HOT 2
- resize is not defined HOT 1
- 'resize' is in example, but not documented
- Hi! Any plans for vue3? ) HOT 3
- vue3中能用吗? HOT 2
- Vue3版本
- 建议增加max-percent,且只针对paneL,另外需要优化mousemove的边界处理 HOT 1
- 建议添加检测percent中含有'px'字样的,直接赋值宽度而不是按照百分比 HOT 2
- ssr 工程使用此插件,运行过程中提示:ReferenceError: document is not defined HOT 2
- unusable
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-split-pane.