input框
首先我们先确定我们的Input组件的需求,
1 有大有小 size属性
2 后面可以加图案 icon属性
3 可以前后缀 prepand/append
4 是否禁用 disabled
当我们自己想封装一个组件时,这个接口首先要继承input本身有的属性,如type,id等等,所以要继承于InputHTMLAttributes<HTMLElement 》其次,因为input标签本身就拥有size属性,故我们要忽略它,用Omit<>即可。IconProps是frotawesome的icon属性。
这样一个接口就完成了。
封装一个组件需要几个步骤,接口已经写完了,
接着要抽离我们自己定义的属性,其他的属性原封不动的还给input标签
2 根据属性不同计算className
使用变量属性的方法来动态添加类
最后实现业务逻辑
一个简单版input组件带验证带大小的就做完了。
接着对其进行优化,再加几个功能
未完待续