接上文书，我们谈到了几个 View UI 的布局组件，感觉还不够用？
别急，除了介绍过的这些外，还有几个布局组件，今天我们来一起把玩一下。
如果对之前的内容不是那么了然于心，这边建议亲最好回顾一下，毕竟之后的内容大概率会穿插以前学过的东东哦！
准备好了吗？OK，开始！
第五弹：布局组件二
四、面板分割 - Split
顾名思义，面板分割可以做到把一个大区域分成若干个小区域。
而且，这个被分割的面板之间还可以随你心意调整区域之间的宽度或高度。
基本用法很简单，共两个部分，一个是 CSS 样式，一个是 Split 代码标签。
样式其实就是画个框框。
<style>
<!-- 整体边框 -->
.demo-split{
height: 200px;
border: 1px solid #dcdee2;
}
<!-- 中间分隔栏 -->
.demo-split-pane{
padding: 10px;
}
</style>
这个是左右结构，注意CSS样式。
<div class="demo-split">
<Split v-model="split1">
<div slot="left" class="demo-split-pane">
......
</div>
<div slot="right" class="demo-split-pane">
......
</div>
</Split>
</div>
这个是上下结构，多了个 mode="vertical" ：
<div class="demo-split" mode="vertical">
<Split v-model="split1">
<div slot="top" class="demo-split-pane">
......
</div>
<div slot="bottom" class="demo-split-pane">
......
</div>
</Split>
</div>
没啥花样吧，效果如下：
呃...这种质朴的画面让我陡然间想起了小时候同桌之间争夺三八线的情景。
年轻的小伙伴们可能不知道吧，早先上学时，一个书桌一条板凳两个人坐，而较为强势的一方会在桌子上划一条竖线，用以明确双方各自的活动势力范围，越界是被打被鄙视的。
当然了，一般所谓强势的一方往往是个女生，因为男生不太会与女生计较，所以这条三八线并不一定是桌子的中轴线。
嗯哼...看来你似乎明白了什么！
没有错啦！
这个面板分割怎么怎么就这么像当年的三八线呢！
不仅把两边区域分割开来，而且还可能因为双方势力此消彼长发生变化而导致三八线在实际中轴线两边来回摆动。
哈哈，太像了不是吗！
好了好了，我们现在都是成年人了，不兴小孩子那一套了。
至于面板分割会用到哪些特殊场合，这里真的很抱歉，作为小白的我，还真没有在实际场景中用过它呢。
也许你很聪明（比我差一点），说不定会有用到它的时候，记得告诉我一声哦！
五、分割线 - Divider
分割线可以用来分割不同的文字或图文内容。
而同样是分割，面板分割似乎太过强调区域的概念，使得它过分拘谨，个人感觉95%以上使用的人会不自觉地选择比它更自由的分割线。
你说巧不巧，我就是那95%以内的人，我情愿用单纯的线条来分割内容，而不会把内容圈得太死。
最早先，一部分人喜欢用多个减号 - ，或者用类似于减号的符号（如波浪号 ~ 等）来分割文本段落，这通常是由于早期的编辑器制定的古板规则使然。
分割内容是人类无法回避的一大哲学问题，你也可以把它归为艺术问题。
如果你使用过 vi 或 vim ，那么会有很不同反响的感受，往往使用过后会被挂上“反人类”的大标签。
但你可能没有想到，传统的编辑规则才是最大的反人类规则，原因很简单，因为你只有两只手，又必须要同时操作键盘和鼠标。
以上个人观点，随便喷，保护环境记得带好口罩。
话再说回来，传统的 html 标签已经为大家提供了一个简单的分割标签 hr 。
什么？HR？
别想歪了，这个 hr 是 水平分隔线（horizontal rule） 的意思！
我一般就用 <hr> 这个标记分隔我想分隔的内容。
当我看到 Divider 时，我发现我太LOW了，我决定改弦更张。
它的用法似乎更优雅一些。
<!-- 单纯的一条分隔线，和hr类似 -->
<Divider></Divider>
<!-- 分隔线带文本 -->
<Divider>我就是那个文本</Divider>
<!-- 分隔线秒变虚线 -->
<Divider dashed></Divider>
效果是这个样子的：
分割线通常是水平横线，不过还可以灵机一动变成垂直的，加个 type="vertical" 就行了。
<Divider type="vertical"></Divider>
效果如下：
带文本的分隔线，这个文本不仅可以在中间，还可以在左，也可以在右。
<Divider orientation="left">文字在左</Divider>
<Divider orientation="right">文字在右</Divider>
效果如下：
这个分隔线够简单吧，就算是美工很烂的我在很多场合也很愿意经常使用它，是比较理想的分隔利器。
小伙伴们可以多用用看哦，挺香的！
六、单元格 - Cell
说实话，这个单元格对小白而言可能会有一些复杂。
官方说明是它用于固定的菜单列表。
至于使用场景，非常抱歉哈，我也并不太了解具体哪些地方会涉及用到它。
也许是菜单中，也许在某些分类区域，不过这并不能限制发挥你的创造力和想像力。
先来看看大概的样子，兴许大概了解过后，你就知道哪里能用到它。
**单元格 <Cell> **通常由多个单元格项目组成，每一项就是一行，由 <Cell></Cell> 包裹的单元格项。
而这些多个单元格项通常又被 单元格组 <CellGroup> 包裹起来。
<Cell-Group>
<Cell></Cell>
......
<Cell></Cell>
</Cell-Group>
实际一点的演示代码如下：
<Cell-Group>
<Cell title="1. 可以只显示个标题"></Cell>
<Cell title="2. 也可以显示标签内容" label="这里是标签内容，叭啦叭啦......"></Cell>
<Cell title="3. 也可以显示右侧详细内容" extra="这里是详细内容"></Cell>
<Cell title="4. 可以是链接" extra="这里是详细内容" to="https://www.sysadm.cc"></Cell>
<Cell title="5. 也可以点击这里打开新窗口" to="https://www.sysadm.cc" target="_blank"></Cell>
<Cell title="6. 哇哦，被禁用了" disabled></Cell>
<Cell title="7.惊喜，被选中了" selected></Cell>
<Cell title="8. 有徽标数" to="/components/badge">
<Badge :count="66" slot="extra" />
</Cell>
<Cell title="9. 还有开关">
<i-Switch v-model="switchValue" slot="extra"></i-Switch>
</Cell>
</Cell-Group>
每行单元格项，可以仅仅显示为一个标题，也可以显示为标签、链接、状态甚至是徽标或开关等其他组件。
具体请参考上面的代码，这里有9行单元格项演示，效果大概是这个样子的：
如果你点击链接之类的单元格项，那么就会跳转到你指定的 To 后面的链接。
不过在点击跳转之前，它默认会触发 on-click 点击事件。
当然了，没有链接的单元格项，你点击它也是会触发这个事件的，事件返回值是你点击项的 name 。
给个示例，传递单元格名称参数到函数中：
<Cell-Group @on-click="name=>onclick(name)">
<Cell name="我是老大"></Cell>
<Cell name="我是老二"></Cell>
<Cell name="我是老三"></Cell>
......
<Cell name="我是谁，我在哪？"></Cell>
</Cell-Group>
另外，在 methods 方法中可以这样写：
onclick (cell_name) {
alert(cell_name);
}
效果大概是这样子：
这样你就可以随心所欲地点击单元格，然后根据它们不同的名称 name 来区分并触发你想做的动作啦！
具体完整的代码，请到文未免费下载参考吧。
总结一下，这一弹给小伙伴们介绍了另外三个布局组件：分割面板、分隔线和单元格。
用得比较多的当属分隔线，当然另外两位小朋友也是值得学习了解的，就看你今后具体怎么运用它们了。
好了，准备下课啦！
本文相关文件下载：
vue.min.js.7z：https://o8.cn/4JnupS 密码：zyc8
ViewUI-4.3.2.zip：https://o8.cn/ilEeNU 密码：88pi
test05.7z：https://o8.cn/mXjzPW
★扫码关注公众号， 发送【000771】获取阅读密码
[文章ID：000771]
前文阅读参考：
WeChat @网管小贾 | www.sysadm.cc
