手仿antd–button按钮

时间:2021-6-12 作者:qvyue

bullet 需求分析

    approx 按钮类型

        以type属性作为关键字,指定不同的type,按钮将自动显示不同的按钮类型:primary、default、danger、link

    approx  是否禁用

        以disabled为关键字,值为boolean类型,为true时要禁用按钮行为,按钮整体样式置灰

    approx  大小

        以size为关键字,指定不同的size显示不同的大小,包括字体大小变化

    approx  原生属性

        需要支持按钮的默认属性

bullet 基本实现

        star 定义类型

手仿antd--button按钮
(除了默认的样式type如primary、danger外,也同时允许用户通过类型className自定义样式;lg、sm、normal分别标识不同的按钮大小;当指向disabled时将呈现不同的按钮样式;children则是按钮内部显示的子元素;href则是type为link时必须给定的值,将用作a标签的href属性)

        star 类名

手仿antd--button按钮
(默认情况下,按钮的样式为su-btn;当用户指定了type或size时切换不同的类目以达到不同样式的展示;同时也将用户自定义的类型传入)

        star  主结构

手仿antd--button按钮
(当type为link时渲染成a标签,其他情况均视为button按钮)

        star 完整代码

手仿antd--button按钮
(通过rest实现兼容button或a标签的原生属性的目的;通过defaultProps设置默认值)

        star 使用

手仿antd--button按钮
(框红的位置是因为之前定义的type和原生的接口冲突而修正的)

手仿antd--button按钮

bullet 问题

        star 当前组件尚不支持原生属性编辑器智能提示,这是因为未指定类型导致的

手仿antd--button按钮
(在types文件下新增button按钮和a链接的props接口)
手仿antd--button按钮
(在button组件中使用交叉类型合并,并通过Partial函数将接口中所有值变为可选)

        star type属性报错

            这是因为type属性已经在react提供的接口中被定义了

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。