iView 经典组件剖析

iView 是一套基于Vue 扣2 的开源UI组件库，主要服务于PC 界面的中后台产品。简单地理解，它是深度封装的40 多个常用业务组件，比如Input 、Checkbox, Select 、Table ；但它同时也是一整套的前端解决方案，包括设计规范、基础样式，支持服务端渲染（ SSR ），同时提供了可视化脚手架，方便快速构建项目工程.

12.1 级联选择组件Cascader

         级联选择是网页应用中常见的表单类控件。iView的每个组件往往依赖其它组件，比如Cascader依赖Input,Drop,Icon组件。

         开发一个通用组件最重要的是定义API，Vue组件的API来自3部分：Prop、slot和event。API决定了一个组件的所有功能，作为对外提供的组件，一旦AP确定，后续再迭代更新用户的代价就很高。所以组件库更新要考虑向前兼容，这对使用者更加友好。

定义Cascader的prop：

Data:决定了级联面板的内容；

Value:当前选择项，可使用v-model；

Disable:是否禁用；

Clearable:是否可清空；

Placeholder:占位提示；

Size:尺寸；

Trigger:触发方式（点击或鼠标滑入）；

ChangeOnSelect:选择即改变；

renderFormat:自定义显示内容。

Cascader的基本构成是3部分：cascader.vue，caspanel.vue和casitem.vue。cascader.vue又分为两部分：只读输入框（input）和下拉菜单（drop）。在下拉菜单中使用第一个caspanel,开始递归每一列。

12.2 折叠面板组件Collapse

         Collapse组件分为两部分：collapse.vue和panel.vue,collapse作为组件容器，接收一个整体的slot，而slot有panel组成，并且可以进行折叠面板的嵌套。Collapse支持v-model来双向绑定当前激活的面板，判断激活的依据是panel的prop:name。如果没有指定的name(有些场景不关心是哪个面板，只是需要折叠面板这个功能)，collapse就会在初始化时遍历panel组件，动态设置一个index。Collapse会优先识别name，在没有定义时才使用自动设置的index。

         Collapse中有两个方法：getActiveKey和setActive，前者用于将当前激活面板的受控数据currentValue根据是否为手风琴状态做处理，使两种模式下的数据格式统一。setActive是遍历panel,并设置其index和isActive。

12.3 iView内置工具函数

         iView项目中还有很多实用的工具函数，比如findComponentUpward、findComponentDownward和findComponentsDownward方法，它们用来向上或向下寻找指定的name组件。

         findComponentUpward方法以当前实例为参考点，向上寻找出指定name或几个name中的一个组件实例，找到后立即返回该实例。findComponentDownward和findComponentsDownward方法与findComponentUpward类似，不同的是向下寻找指定的组件，但findComponentsDownward会找到所有匹配的子组件，而findComponentDownward只会找到第一个匹配的。

除了工具函数外，iView内置的自定义指令、混合也可以直接使用。