拆分面板组件备忘留存

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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>    ); }

截图