button按钮（icon）

html-css06

button按钮（icon）,第1张

    上一节，我们已经基本实现了按钮组件，但是还不够完善，因为我们的组件并未内置图标，像antd就可以通过icon属性显示一个图标按钮。这一节就来实现它 需求分析    添加icon属性，用来显示不同的icon图标，并且支持传递字符串或对象，对象形式将用来进行更多控制       添加loading属性，标识按钮加载中 基本实现      增加类型定义       增加类名标识                 当icon或loading属性存在时，增加su-btn-icon标识，对应的css如下       处理icon渲染                 该函数将在按钮文本前被调用，即       使用

给按钮添加css样式有以下三种方法：

1，直接在元素上定义style，如下：

<input type="button" style="这里定义样式">

2，页面中内嵌样式，如下：

<style>

    .btn{需要添加的样式}

</style>

<input type="button" class="btn">

3，外部引用css文件，如下：

<link rel="stylesheet" type="text/css" href="这里是css文件的路径">