split-pane-vue3
Version:
93 lines (76 loc) • 3.68 kB
Markdown
# Vue Page Split
> Resizable splitted panels based on Vue3.
[Vue2 Version](https://www.npmjs.com/package/vue-page-split)
English | [简体中文](./README.md)
## 📦 Install
``` bash
$ npm i vue3-page-split -S
```
## 🔨 Usage
How to use in Vue project.
```html
<template>
<SplitPane
:distribute="0.5"
:lineThickness="6"
:isVertical="false"
@resizeLineStartMove="onresizeLineStartMove"
@resizeLineMove="onResizeLineMove"
@resizeLineEndMove="onresizeLineEndMove"
>
<template v-slot:first>
<h1>A</h1>
</template>
<template v-slot:second>
<h1>B</h1>
</template>
</SplitPane>
</template>
<script>
import PageSplit from "vue3-page-split";
import "vue3-page-split/dist/style.css";
export default {
components: {
SplitPane
},
methods: {
onresizeLineStartMove: function() {
console.log("onresizeLineStartMove");
},
onResizeLineMove: function(e) {
console.log("onResizeLineMove :>> ", e);
},
onresizeLineEndMove: function() {
console.log("onresizeLineEndMove");
}
}
};
</script>
```
## 🔠 Properties
| Property name | type | Default value | Description |
|-------------------------|---------|---------------|---------------------------------------------------------------------------|
| distribute | Number | 0.5 | Panel ratio, between 0 and 1. |
| isVertical | Boolean | true | Split mode(true means vertical incision, otherwise horizontal incision). |
| lineThickness | Number | 6 | Width of the split line. |
| hasLineTip | Boolean | true | There are three short lines inside the split line or not. |
| backgroundColor | String | "#a0cfff" | Background color of the split line. |
| hoverColor | String | "#409eff" | Background color of the split line when mouse hovers over. |
| hasBoxShadow | Boolean | true | Split line has box-shadow style or not. |
| firstMinValue | Number | 0 | Width of the first partition, must >= 0. |
| secondMinValue | Number | 0 | Width of the second partition, must >= 0. |
| isFirstComponentMasked | Boolean | false | If there is transparent mask layer covered over the the first partition. |
| isSecondComponentMasked | Boolean | false | If there is transparent mask layer covered over the the second partition. |
Tip: Component Mask is for capturing mouse event.
It is necessary when there is an iframe inside the page, because iframe will hide the mouse event from the page.
## 🎺 Events
This component will trigger three events.
| Event name | Description | Return type |
|---------------------|-------------|--------------|
| resizeLineStartMove | start move | - |
| resizeLineMove | moving | event object |
| resizeLineEndMove | finish move | - |
## 📷 Sample Pictures
In case of missing sample pictures, please go to the Homepage or Repository and check.
