手仿antd–button按钮(icon)

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

    上一节,我们已经基本实现了按钮组件,但是还不够完善,因为我们的组件并未内置图标,像antd就可以通过icon属性显示一个图标按钮。这一节就来实现它

bullet 需求分析

    approx 添加icon属性,用来显示不同的icon图标,并且支持传递字符串或对象,对象形式将用来进行更多控制

    approx  添加loading属性,标识按钮加载中

bullet 基本实现

    star  增加类型定义

手仿antd--button按钮(icon)
(增加了loading和icon属性,其中icon属性使用联合类型标识可选,当为IconConfig时表示传入的是对象形式,否则是字符串形式)

    star  增加类名标识

手仿antd--button按钮(icon)

                当icon或loading属性存在时,增加su-btn-icon标识,对应的css如下

手仿antd--button按钮(icon)

    star  处理icon渲染

手仿antd--button按钮(icon)
(使用断言标识不同类型的icon传参)

                该函数将在按钮文本前被调用,即

手仿antd--button按钮(icon)

    star  使用

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