概述
- 如果是改组件本身的逻辑可以通过 minxin的方式把组件本身当成mixins然后重写逻辑
- 如果是改组件组件内子组件的逻辑可以通过import出这个组件因为import方式导出对象拿到的是对象的地址值所以就可以通过一层层访问拿到内部子组件的应用将他的逻辑进行重写。如在抽取i-tabs组件的时候 标签页title的选中底部线宽度只会算上label 内容的宽度不会加上左右padding的宽度,而ui稿又要求需要带上左右padding的宽度,由于这条底线是动态计算的所有就只能去重写他的计算方法。 还有就是ui要求 tabs的header栏右侧需要放置一个select组件 而el-tabs组件是不支持的 所以就只能去重写的他render方法增加一个slot.
- 当文档中的描述不足满足需求时就可以通过阅读源码寻找突破点如在抽上传组件时 el-upload自带的flie-list无法满足ui,查阅文档又是只能去控制是否显示file-list而在我通过阅读源码后我发现它内部其实是留有一个名为file的slot的 并且还将当前file item的信息传出这时候我们就可以自定义flie-list的样式了
做了哪些组件
级联组件
- 根据ui稿调整样式
- 改写多选折叠显示tag只能显示一项的逻辑,将其改为可显示指定个数的tag其他计数显示, 通过继承原组件,重写计算逻辑。
search 搜索区组件
- 内置el-form,根据ui稿样式将搜索面板抽离成组件,支持显示页面title,通过默认插槽将筛选项传入,还支持只展示一行收起其余的筛选行功能。
i-tabs-search 标签页搜索栏组件
- 这个组件是由于项目中表格头部的筛选区多是那种多是放在tab页中的,于是将这块进行抽离
- 简化了el-tabs组件,支持直接传入数组便可以渲染出对应的标签页,而标签页如果可以通过具名插槽或是默认插槽的方式传入,
i-upload 上传组件
- 提供类型预设,同时支持自定义。
- 根据类型自动生成tips同时支持自定义tips
- 提供文件类型检查,最大体积检查
- 提供用更覆盖项目场景的httpRequire方法同时支持自定义覆盖
- 根据UI稿调整el-upload样式并重写file-list,使得组件更加美观
nav-header 组件
- 组件结构为左侧 login + 项目名称以及。 右侧为
