Vue-page-split NPM

Vue Page Split

Resizable splitted panels based on Vue2.

📦 Install

$ npm i vue-page-split -S

🔨 Usage

How to use in Vue project.

<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 "vue-page-split";

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.