Button
useConfigInject-接受注入的全局属性
props接受参数,根据type,shape,size,loading,block,danger不同来渲染不同样式
fixTwoCNChar方法在指定两个中文之间插入空格
handleClick处理点击事件,在disabled时通过event.preventDefault()阻止默认事件
wave组件,点击波纹效果的统一封装,通过监听子组件事件,注册点击事件newClick动态增加水波波纹的动画样式
Icon
通过@ant-design/icons-vue,将svg组件封装,提供内置样式,支持局部引入,地址
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,实现宽度变化