拆分面板组件备忘留存

最近项目中需要用到左右布局，但可以动态拖动两边布局的宽度，遂研究了下面板拆分组件

vue项目可用

vue-splitpane

https://www.npmjs.com/package/vue-splitpane

npm install vue-splitpane

import splitPane from 'vue-splitpane'
Vue.component('split-pane', splitPane);

<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>

react项目可用

react-split-pane

https://www.npmjs.com/package/react-split-pane

demo例子：https://react-split-pane-v2.surge.sh/

yarn add react-split-pane

import React from 'react;
import SplitPane from 'react-split-pane'
const Demo: React.FC = () => {
	return (
		<SplitPane split="horizontal">
          <div>
            <span>首页</span>
          </div>
          <div>
            content
          </div>
       </SplitPane>
   );
}

截图