v-spanlit-pane-cai

一个用来页面布局使用的可以实现拖拽

How to use?

# install 
npm install v-spanlit-pane-cai

#import
import v-spanlit-pane-cai from 'v-spanlit-pane-cai'

# use as global component
Vue.component('split-pane', v-spanlit-pane-cai);

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 |