vue中使用vue-splitpane 拉伸缩小插件_vue splitpanes

1.下载插件（vue2）

npm i splitpanes@legacy

2.组件中使用

import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
 
export default {
  components: { Splitpanes, Pane },
  ...
}

<splitpanes style="height: 400px">
  <pane min-size="20">1</pane>
  <pane>
    <splitpanes horizontal>
      <pane>2</pane>
      <pane>3</pane>
      <pane>4</pane>
    </splitpanes>
  </pane>
  <pane>5</pane>
</splitpanes>
 
 
 
 
//css样式
.splitpanes__pane {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.6);
  font-size: 5em;
}

3.官网  Splitpanes (antoniandre.github.io)