Vue SplitePane是Vue中的切分控件。地址是Splitpanes (antoniandre.github.io)
在vue3中使用,npm i splitpanes
在vue2中使用,npm i splitpanes@legacy
使用时需要引入组件和css:
// In your Vue component.
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
components: { Splitpanes, Pane },
...
}
可以使用size设置初始大小,min-size设置最小值和max-size设置最大值:
<splitpanes class="default-theme">
<pane style="background:transparent" size="16" min-size="10" max-size="30">
<templatetree></templatetree>
</pane>
<pane style="background:transparent" size="42" min-size="20" max-size="70">
<templatedesign></templatedesign>
</pane>
<pane style="background:transparent" size="42" min-size="20" max-size="70">
<templatepreview></templatepreview>
</pane>
</splitpanes>
网友评论