组件源码分析——ant-design-vue

376 阅读3分钟

Button

useConfigInject-接受注入的全局属性

props接受参数,根据type,shape,size,loading,block,danger不同来渲染不同样式

fixTwoCNChar方法在指定两个中文之间插入空格

handleClick处理点击事件,在disabled时通过event.preventDefault()阻止默认事件

wave组件,点击波纹效果的统一封装,通过监听子组件事件,注册点击事件newClick动态增加水波波纹的动画样式

Icon

通过@ant-design/icons-vue,将svg组件封装,提供内置样式,支持局部引入,地址

github.com/ant-design/…

Typography

分为以下组件注册 Typography.Text Typography.Title Typography.Paragraph Typography.Link Typography.Base

Typography,基本文本组件接受component传参,生成动态class渲染,内容原子组件。tsx支持Component动态标签。

Typography.Base 原子组件,用做其他组件的底层组件,采用Typography组件渲染内容,根据props的editable类型动态渲染两种组件,editable接受两种参数,当为boolean类型时,判断编辑组件与基础文本组件,当editable为对象时为编辑组件,支持editing,tooltip,onStart,onChange,onCancel,onEnd,maxlength,autoSize,triggerType属性,编辑组件采用TextArea组件实现,接受原生属性。editing控制编辑组件的显隐,与editable绑定,采用useMergedState组合函数实现,useMergedState接受一个默认值与一个options, options的value属性为一个计算属性时,通过watchEffect监听改变默认值,返回一个状态值editing与一个状态改变函数triggerChange。Typography.Base外层通过全局的LocaleReceiver组件包裹,将Base组件通过children传入,接受一个locale参数支持国际化,locale为一个函数,返回当前语言的文件对象。

Typography.Title 接受level参数,组合成component值传递给Typography.Base组件,Typography.Base组件将component传递给Typography渲染节点。

Typography.Title传递component: 'span',生成span标签

Typography.Link传递component: 'a',生成a标签

Typography.Link传递component: 'div',生成div标签

Editable,Typography的编辑组件,采用TextArea实现,支持事件组成与原生属性。

Divider

通过after和before伪类增加分割线,默认插槽插入内容,根据before和after伪类的宽度来设置文字居左,居右。

Grid

Row组件,Col组件

Row组件,通过class不同设置flex的宽度,ResponsiveObserve响应式获取屏幕宽度,gutter根据当前屏幕宽度返回当前的间隔,,设置marginLeft,marginRight大小,将screen通过provide传入Col组件。

Col组件,根据不同props渲染出不同类,根据screen获取当前的gutter,设置paddingLeft和paddingRight,根据props传入的flex设置Col组件的flex属性。

Layout

Layout组件,Header组件,Footer组件,Sider组件,Content组件

通过调用generator函数闭包传参数,动态生成组件

generator函数,接受suffixCls, tagName, name生成组件的prefixCls,使用useConfigInject合并全局的属性,使用传入的组件动态渲染成BasicComponent公共组件

Sider组件,通过inject调用layout的addSider方法,增加layout类,根据collapsed判断展开折叠,监听屏幕分辨率变化事件,响应式的改变折叠展开,接受props的collapsedWidth和width动态设置flex,实现宽度变化