Vue3 Split Pane

Split-Pane component built with vue3.0 + typescript， can be split vertically or horizontally.

How to use?

npm i vue3-splitpane

#import
import splitPane from 'vue3-splitpane'

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

Example

//vue3.0：
<template>
  <splitPane @resize="handleResize" :min-percent='20' :default-percent='30' split="vertical">
    <template #paneL>
      <div class="panel-box">1</div>
    </template>
    <template #paneR>
      <div class="panel-box">2</div>
    </template>
  </splitPane>
</template>

<script setup lang="ts">
import splitPane from "vue3-splitpane";
const handleResize=()=>{
    //todo
};
</script>

<style scoped>
</style>

  //nesting
   <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template #paneL>
        A
      </template>
      <template #paneR>
        <split-pane split="horizontal">
          <template #paneL>
           B
          </template>
          <template #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 |