Vue — 组件封装splitpane(分割面板)
最后更新于：2022-04-02 08:09:01
[TOC]
>[success] # splitpane -- 分割面板组件
~~~
1.splitpane -- 分割面板组件 介绍，是一个可以拖动菜单宽度，可以生成想要
的菜单宽度和内容宽度的一种布局方式
~~~
>[danger] ##### 思想总结
~~~
1.做一个布局组件，或者其他类型组件的时候，将组件内部最外层的宽和高
设置成100%，当你去调用组件的时候，就可以通过设置调用组件包裹的
dom，去设置这个dom即可让组件宽高变成自己想要的
2.左右布局传统的形式是float浮动来设置布局
3.可以用定位的形式来进行布局调整
4.要用数据去驱动这个组件逻辑
5.计算图片中，红色区域在正中间（图片见代码思想总结第五条）
~~~
>[info] ## 思想总结代码
~~~
1.下面代码组件 统一是'split-pane'
~~~
>[danger] ##### 思想总结第一条和第二条
~~~
1. 组件整个根节点'split-pane-wrapper' 这个样式宽和高被设置成了百分百，
当你在调用的时候例如下面案例只需要将'split-pane-con'定义好想要的宽高
即可:
';