【Element-ui】Icon 图标与Button 按钮

---

前言

在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。

---

一、Icon 图标

1.1 作用

提供了一套常用的图标集合。

1.2 使用方法

直接通过设置类名为 el-icon-iconName 来使用即可。例如：

<i class="el-icon-edit">i>
<i class="el-icon-share">i>
<i class="el-icon-delete">i>
<el-button type="primary" icon="el-icon-search">搜索el-button>
1
2
3
4

我们只需要使用i标签class为图标名称即可.如果你使用的是i标签
如果是其他，则使用icon属性

1.3 图标集合

图标集合如下：

el-icon-platform-eleme
el-icon-eleme
el-icon-delete-solid
el-icon-delete
el-icon-s-tools
el-icon-setting
el-icon-user-solid
el-icon-user
el-icon-phone
el-icon-phone-outline
el-icon-more
el-icon-more-outline
el-icon-star-on
el-icon-star-off
el-icon-s-goods
el-icon-goods
el-icon-warning
el-icon-warning-outline
el-icon-question
el-icon-info
el-icon-remove
el-icon-circle-plus
el-icon-success
el-icon-error
el-icon-zoom-in
el-icon-zoom-out
el-icon-remove-outline
el-icon-circle-plus-outline
el-icon-circle-check
el-icon-circle-close
el-icon-s-help
el-icon-help
el-icon-minus
el-icon-plus
el-icon-check
el-icon-close
el-icon-picture
el-icon-picture-outline
el-icon-picture-outline-round
el-icon-upload
el-icon-upload2
el-icon-download
el-icon-camera-solid
el-icon-camera
el-icon-video-camera-solid
el-icon-video-camera
el-icon-message-solid
el-icon-bell
el-icon-s-cooperation
el-icon-s-order
el-icon-s-platform
el-icon-s-fold
el-icon-s-unfold
el-icon-s-operation
el-icon-s-promotion
el-icon-s-home
el-icon-s-release
el-icon-s-ticket
el-icon-s-management
el-icon-s-open
el-icon-s-shop
el-icon-s-marketing
el-icon-s-flag
el-icon-s-comment
el-icon-s-finance
el-icon-s-claim
el-icon-s-custom
el-icon-s-opportunity
el-icon-s-data
el-icon-s-check
el-icon-s-grid
el-icon-menu
el-icon-share
el-icon-d-caret
el-icon-caret-left
el-icon-caret-right
el-icon-caret-bottom
el-icon-caret-top
el-icon-bottom-left
el-icon-bottom-right
el-icon-back
el-icon-right
el-icon-bottom
el-icon-top
el-icon-top-left
el-icon-top-right
el-icon-arrow-left
el-icon-arrow-right
el-icon-arrow-down
el-icon-arrow-up
el-icon-d-arrow-left
el-icon-d-arrow-right
el-icon-video-pause
el-icon-video-play
el-icon-refresh
el-icon-refresh-right
el-icon-refresh-left
el-icon-finished
el-icon-sort
el-icon-sort-up
el-icon-sort-down
el-icon-rank
el-icon-loading
el-icon-view
el-icon-c-scale-to-original
el-icon-date
el-icon-edit
el-icon-edit-outline
el-icon-folder
el-icon-folder-opened
el-icon-folder-add
el-icon-folder-remove
el-icon-folder-delete
el-icon-folder-checked
el-icon-tickets
el-icon-document-remove
el-icon-document-delete
el-icon-document-copy
el-icon-document-checked
el-icon-document
el-icon-document-add
el-icon-printer
el-icon-paperclip
el-icon-takeaway-box
el-icon-search
el-icon-monitor
el-icon-attract
el-icon-mobile
el-icon-scissors
el-icon-umbrella
el-icon-headset
el-icon-brush
el-icon-mouse
el-icon-coordinate
el-icon-magic-stick
el-icon-reading
el-icon-data-line
el-icon-data-board
el-icon-pie-chart
el-icon-data-analysis
el-icon-collection-tag
el-icon-film
el-icon-suitcase
el-icon-suitcase-1
el-icon-receiving
el-icon-collection
el-icon-files
el-icon-notebook-1
el-icon-notebook-2
el-icon-toilet-paper
el-icon-office-building
el-icon-school
el-icon-table-lamp
el-icon-house
el-icon-no-smoking
el-icon-smoking
el-icon-shopping-cart-full
el-icon-shopping-cart-1
el-icon-shopping-cart-2
el-icon-shopping-bag-1
el-icon-shopping-bag-2
el-icon-sold-out
el-icon-sell
el-icon-present
el-icon-box
el-icon-bank-card
el-icon-money
el-icon-coin
el-icon-wallet
el-icon-discount
el-icon-price-tag
el-icon-news
el-icon-guide
el-icon-male
el-icon-female
el-icon-thumb
el-icon-cpu
el-icon-link
el-icon-connection
el-icon-open
el-icon-turn-off
el-icon-set-up
el-icon-chat-round
el-icon-chat-line-round
el-icon-chat-square
el-icon-chat-dot-round
el-icon-chat-dot-square
el-icon-chat-line-square
el-icon-message
el-icon-postcard
el-icon-position
el-icon-turn-off-microphone
el-icon-microphone
el-icon-close-notification
el-icon-bangzhu
el-icon-time
el-icon-odometer
el-icon-crop
el-icon-aim
el-icon-switch-button
el-icon-full-screen
el-icon-copy-document
el-icon-mic
el-icon-stopwatch
el-icon-medal-1
el-icon-medal
el-icon-trophy
el-icon-trophy-1
el-icon-first-aid-kit
el-icon-discover
el-icon-place
el-icon-location
el-icon-location-outline
el-icon-location-information
el-icon-add-location
el-icon-delete-location
el-icon-map-location
el-icon-alarm-clock
el-icon-timer
el-icon-watch-1
el-icon-watch
el-icon-lock
el-icon-unlock
el-icon-key
el-icon-service
el-icon-mobile-phone
el-icon-bicycle
el-icon-truck
el-icon-ship
el-icon-basketball
el-icon-football
el-icon-soccer
el-icon-baseball
el-icon-wind-power
el-icon-light-rain
el-icon-lightning
el-icon-heavy-rain
el-icon-sunrise
el-icon-sunrise-1
el-icon-sunset
el-icon-sunny
el-icon-cloudy
el-icon-partly-cloudy
el-icon-cloudy-and-sunny
el-icon-moon
el-icon-moon-night
el-icon-dish
el-icon-dish-1
el-icon-food
el-icon-chicken
el-icon-fork-spoon
el-icon-knife-fork
el-icon-burger
el-icon-tableware
el-icon-sugar
el-icon-dessert
el-icon-ice-cream
el-icon-hot-water
el-icon-water-cup
el-icon-coffee-cup
el-icon-cold-drink
el-icon-goblet
el-icon-goblet-full
el-icon-goblet-square
el-icon-goblet-square-full
el-icon-refrigerator
el-icon-grape
el-icon-watermelon
el-icon-cherry
el-icon-apple
el-icon-pear
el-icon-orange
el-icon-coffee
el-icon-ice-tea
el-icon-ice-drink
el-icon-milk-tea
el-icon-potato-strips
el-icon-lollipop
el-icon-ice-cream-square
el-icon-ice-cream-round
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280

其效果如下：

二、Button 按钮

常用的操作按钮。

2.1 基础用法

基础的按钮用法。

使用type、plain、round和circle属性来定义 Button 的样式。
这些属性的意义如下：

参数 说明 类型 可选值 默认值
type 类型 string primary / success / warning / danger / info / text —
plain 是否朴素按钮 boolean — false
round 是否圆角按钮 boolean — false
circle 是否圆形按钮 boolean — false

<el-row>
  <el-button>默认按钮el-button>
  <el-button type="primary">主要按钮el-button>
  <el-button type="success">成功按钮el-button>
  <el-button type="info">信息按钮el-button>
  <el-button type="warning">警告按钮el-button>
  <el-button type="danger">危险按钮el-button>
el-row>

<el-row>
  <el-button plain>朴素按钮el-button>
  <el-button type="primary" plain>主要按钮el-button>
  <el-button type="success" plain>成功按钮el-button>
  <el-button type="info" plain>信息按钮el-button>
  <el-button type="warning" plain>警告按钮el-button>
  <el-button type="danger" plain>危险按钮el-button>
el-row>

<el-row>
  <el-button round>圆角按钮el-button>
  <el-button type="primary" round>主要按钮el-button>
  <el-button type="success" round>成功按钮el-button>
  <el-button type="info" round>信息按钮el-button>
  <el-button type="warning" round>警告按钮el-button>
  <el-button type="danger" round>危险按钮el-button>
el-row>

<el-row>
  <el-button icon="el-icon-search" circle>el-button>
  <el-button type="primary" icon="el-icon-edit" circle>el-button>
  <el-button type="success" icon="el-icon-check" circle>el-button>
  <el-button type="info" icon="el-icon-message" circle>el-button>
  <el-button type="warning" icon="el-icon-star-off" circle>el-button>
  <el-button type="danger" icon="el-icon-delete" circle>el-button>
el-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2.2 禁用状态

按钮不可用状态。

<el-row>
  <el-button disabled>默认按钮el-button>
  <el-button type="primary" disabled>主要按钮el-button>
  <el-button type="success" disabled>成功按钮el-button>
  <el-button type="info" disabled>信息按钮el-button>
  <el-button type="warning" disabled>警告按钮el-button>
  <el-button type="danger" disabled>危险按钮el-button>
el-row>

<el-row>
  <el-button plain disabled>朴素按钮el-button>
  <el-button type="primary" plain disabled>主要按钮el-button>
  <el-button type="success" plain disabled>成功按钮el-button>
  <el-button type="info" plain disabled>信息按钮el-button>
  <el-button type="warning" plain disabled>警告按钮el-button>
  <el-button type="danger" plain disabled>危险按钮el-button>
el-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.3 文字按钮

没有边框和背景色的按钮。

<el-button type="text">文字按钮el-button>
<el-button type="text" disabled>文字按钮el-button>
1
2

2.4 图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。

设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。

<el-button type="primary" icon="el-icon-edit">el-button>
<el-button type="primary" icon="el-icon-share">el-button>
<el-button type="primary" icon="el-icon-delete">el-button>
<el-button type="primary" icon="el-icon-search">搜索el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right">i>el-button>
1
2
3
4
5

2.5 按钮组

以按钮组的方式出现，常用于多项类似操作。

使用标签来嵌套你的按钮。

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right">i>el-button>
el-button-group>
<el-button-group>
  <el-button type="primary" icon="el-icon-edit">el-button>
  <el-button type="primary" icon="el-icon-share">el-button>
  <el-button type="primary" icon="el-icon-delete">el-button>
el-button-group>
1
2
3
4
5
6
7
8
9

2.6 加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

要设置为 loading 状态，只要设置loading属性为true即可。

<el-button type="primary" :loading="true">加载中el-button>
1

2.7 不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
额外的尺寸：medium、small、mini，通过设置size属性来配置它们。

<el-row>
  <el-button>默认按钮el-button>
  <el-button size="medium">中等按钮el-button>
  <el-button size="small">小型按钮el-button>
  <el-button size="mini">超小按钮el-button>
el-row>
<el-row>
  <el-button round>默认按钮el-button>
  <el-button size="medium" round>中等按钮el-button>
  <el-button size="small" round>小型按钮el-button>
  <el-button size="mini" round>超小按钮el-button>
el-row>
1
2
3
4
5
6
7
8
9
10
11
12

---

总结

在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。Icon图标为页面添加了更多的视觉元素，使得界面更加生动；而Button按钮则是用户与页面互动的纽带，通过丰富的配置选项，我们能够定制出符合项目需求的按钮样式。在实际项目中，熟练掌握这两个组件的用法，将有助于提升前端界面的设计水平，为用户提供更好的使用体验。希望本文能够为你在Element-ui的使用过程中提供一些有益的参考。