react+ts 造轮子仿antd Alert

Alert组件

先看效果图:
在这里插入图片描述

该组件支持五种颜色,分别是primary,default,warning,success,danger,
大小支持lg,sm,normal。
最左边的关闭按钮可以控制是否显示。
可以支持标题加内容。
看代码
在这里插入图片描述
在这里插入图片描述
样式使用了scss中的mixin,@extend,@include等,可以更加方便简洁的书写css样式,里面的很多$变量我已经先定义好了。

interface接口

在这里插入图片描述
要传入的值可以是children,type,size,title,show。

枚举

在这里插入图片描述
枚举可以让我们更加方便的操作代码,使用AlertType.Warning来代替warning,这样以后如果想修改warning为warn,只需要在enum改一下就好。

类型别名在这里插入图片描述

具体写法已经在我第一篇文章button组件时介绍了。

主要代码

在这里插入图片描述
使用代码
在这里插入图片描述
效果如图
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/lin_fightin/article/details/113343690