@bbfe/components-assembly

components-assembly

组件合集，代理不同 UI 组件库

目前支持 ElementUI，目的是扩展组件功能，修改组件样式

采用 ant.design 设计思想

实现

通过 mixins 混入组件，扩展组件方法和属性

完全编译 css 替代原组件库样式

组件文档

• Menu
• 反馈类 Feedback 包括 MessageBox、Message 等
• 组件扩展 Slots 包括 Select、RadioGroup、CheckboxGroup 等

组件配置项（全代理组件遇到的问题和经验）

无法解决 $parent $children 引用问题

代理第三方组件需要将组件上的配置全部透传给被代理组件

需要透传的属性有

• attribute
• props , 需要从 attributes 中剥离掉props
• events
• methods
• slots
• scoped slots
• 第三方组件需要的 directives：v-model

其中 class 和 style 归属于 attribute

attribute

attribute 会过滤掉 props 中声明的属性，除去 class 和 style 后作为 html attribute 出现的标签上

props

可以通过 vm.$attrs 获取外界传递的 attribute 作为 props 透传给被代理组件

因为代理组件没有声明 props，所以全部 attribute 会作为 html attribute 出现在标签上

暂时的解决方案：mounted 周期时删掉代理组件上被代理组件 props 对应的 attribute

events handling

可以通过 vm.$listeners 获取外界传递的事件，不包含 .native 修饰后的事件

methods

通过访问被代理组件的实例属性 vm.$options.methods 拿到实例所具有的方法

将获取的实例方法赋给代理组件，实现方法透传

slots

分发不同具名 slot 给被代理组件，默认 slot 名字为 default，通过 vm.$slots 获取

scopedSlots

通过 template scope 语法获取被代理组件传递的值，再通过 slot 传给代理组件

directives

表单组件的 v-model

TODO 怎么透传 v-model 或针对不同组件做处理

思路参考被代理组件的实现方式，因为被代理组件也是自己实现的 v-model

不同表单类组件监听的事件不一致

<!--input 组件-->
<input :value="value" @input="val=>{ value = val }" />

目前已知无法解决的问题

全代理组件是在第三方组件之上封装了一个组件，导致 $parent $children 之间多了一层引用

如果组件内部有对 $parent 的操作，则会导致获取到的组件引用出问题，例如 elementUI TableColumn 组件

通过抽象组件，声明 abstract 属性可以使当前组件不存在与 $parent $children 引用链中，但是无法传递 data 详见 https://github.com/vuejs/vue/blob/dev/src/core/vdom/create-element.js#L82