80种奇奇怪怪的按钮，先睹为快！

本文详细讲解 View UI 中，Button 组件的样式配置和单击事件响应。

一、按钮样式

1.1 颜色

颜色是按钮的基础样式之一，通过设置Button 的 type属性，可以实现按钮颜色的变化。

目前View UI支持以下八种颜色，分别为：

primary、dashed、text、info、success、warning、error

分别对应下图八种颜色

配置方法很简单，就是给 Button 组件，加一个 type 属性即可

<Button type="error">测试按钮</Button>

1.2 大小

大小也是按钮的基础样式之一，通过设置Button 的 size 属性，可以实现按钮大小的变化。

目前View UI支持以下三种大小，分别为：

small、default、large

配置代码如下所示：

1. <Row :gutter="32">
2. <Col span="2">
3. <Button type="warning" size="small">测试按钮</Button>
4. </Col>
5. <Col span="2">
6. <Button type="warning" size="default">测试按钮</Button>
7. </Col>
8. <Col span="2">
9. <Button type="warning" size="large">测试按钮</Button>
10. </Col>
11. </Row>

1.3 按钮形状

圆角决定了这个按钮的四个边缘是否光滑。

在实际开发中，通常会设置圆角，让界面更有美感。

目前View UI只支持圆角这一种形状

通过设置 Button 组件的 shape 属性，实现圆角。

1. <Col span="2">
2. <Button type="info" shape="circle">按钮25</Button>
3. </Col>

1.4 背景透明

背景透明在 View UI 中又称为幽灵属性。

下图设置了背景透明，可以透过按钮看到淡蓝色的背景。

通过设置 Button 组件的 ghost 属性 = true，实现背景透明。

1. <Col span="2">
2. <Button type="dashed" ghost>按钮13</Button>
3. </Col>

1.5 按钮图标

按钮的文字前面或后面可以放置图标，从而让按钮的功能更加通俗易懂。

View UI 自带了很多ICON图标，一般情况下可以满足我们的开发需求。

可以使用 Button 组件的 icon属性，为按钮设置前置图标。

也可以通过在 Button 组件内，放置 Icon 组件，来实现按钮的前置、后置图标，但优先级小于 Button 组件配置的icon属性。

演示效果如下所示：

源代码如下所示：

1. <Row :gutter="32">
2. <Col span="2">
3. <Button type="warning" shape="circle" icon="ios-wifi">测试按钮</Button>
4. </Col>
5. <Col span="2">
6. <Button type="warning" shape="circle">
7.       测试按钮
8. <Icon type="ios-add-circle-outline" />
9. </Button>
10. </Col>
11. <Col span="2">
12. <Button type="warning" shape="circle">
13. <Icon type="ios-add-circle-outline" />
14.       测试按钮
15. </Button>
16. </Col>
17. <Col span="2">
18. <Button type="warning" shape="circle" icon="ios-wifi">
19. <Icon type="ios-add-circle-outline" />
20.       测试按钮
21. </Button>
22. </Col>
23. </Row>

1.6 其他样式

View UI 还支持其他的样式配置，因为不太常用，所以不再一一演示。

比如：

long 属性项，用于配置按钮宽度是否扩充至全屏

disabled 属性项，用于配置按钮是否被禁用，即无法被点击的样式

loading属性项，用于配置按钮是否显示加载中图标

html-type 属性项，用于兼容原生H5的提交属性

......

二、按钮事件

2.1 按钮传值

按钮，顾名思义就是按了之后能够扭动起来（就是能干事）。

我认为按钮在前端的作用，就是让C端用户主动去触发某个事件，完成人机交互。

其中很重要的一点，就是按钮点击传值问题，View UI 的按钮能不能传值？方不方便？

答案当然是 —— 能！

View UI 的 Button 组件 可通过 @click 配置该按钮的单击事件！

我分为四种情况，逐一测试

2.1.1 无传输值单击事件

按钮的单击事件，如果没有传参数，View UI 的 Button 组件会返回一个窗体对象，密密麻麻，包括点击的坐标值，屏幕宽高等等......

其实......这些东西对你来说，一点都没用。

对，你没听错！一点都没用！一点都没用！一点都没用！

那么则么让他有用起来呢？就需要传值！

1. <Col span="6">
2. <Button type="warning"  shape="circle" @click="clickTest">无传输值</Button>
3. </Col>

2.1.2 传输静态参数

在实际开发中，可能会遇到按钮需要传参的需求。

有一些的按钮是固定的，你点了他，就代表XXX的固定功能，那么可以考虑静态传参

1. <Col span="6">
2. <Button type="warning"  shape="circle" @click="clickTest(3.14159)">传输数字</Button>
3. </Col>

传递参数后，在单击事件中打印即可，效果如下图所示：

2.1.3 传递动态参数

很多情况下，需要根据实际情况传递动态的参数值。

1. <Col span="6">
2. <Button type="warning"  shape="circle" @click="clickTest(testData)">传输动态内容</Button>
3. </Col>

比如这个testData，是我自己定义的一个变量。

1. <script>
2. export default {
3. name: 'test',
4. data() {
5. return {
6. testData: '传输值'
7.     }
8.   },
9. methods: {
10. clickTest(e) {
11. console.log(e);
12.     }
13.   }
14. }
15. </script>

这样就可以实现 Button 组件的动态传参。

2.1.4 循环渲染传参

我在实际开发中，用的最多的就是 v-for 下按钮传值。

比如下面这样

1. <Row :gutter="32">
2. <Col span="6" v-for="(item,index) in userList" :key="index">
3. <Button type="warning"  shape="circle" @click="clickTest(item)">循环渲染传值{{index}}</Button>
4. </Col>
5. </Row>

userList 一般为后端传递过来的对象数组

我们需要给按钮的单击事件，传递数组中当前对象的，一个或多个属性值

1. <script>
2. export default {
3. name: 'test',
4. data() {
5. return {
6. testData: '传输值',
7. userList: [
8.         {id: 1,name: 'ZWZ1'},
9.         {id: 2,name: 'ZWZ2'},
10.         {id: 3,name: 'ZWZ3'}
11.       ]
12.     }
13.   },
14. methods: {
15. clickTest(e) {
16. console.log(e);
17.     }
18.   }
19. }
20. </script>

这样就可以给按钮单击事件，传递相应的值

2.2 按钮跳转

有时会需要单击按钮打开某个网址。

比如C端用户单击按钮后，导出Excel（对接Java POI），就要访问后端 API 的 URL，实现快速导出Excel。

当然可以使用 JS 自带的方法来打开网址

1. test() {
2.   window.open("https://blog.csdn.net/qq_41464123","_blank");
3. },

View UI 也为我们提供了快速跳转 URL 的方法，在 button 组件中，配置 to 属性即可。

View UI 还可以实现无痕浏览，满足开发者的多维需求。

1. <Row :gutter="32">
2. <Col span="6">
3. <Button to="https://blog.csdn.net/qq_41464123" type="warning"  shape="circle">我的博客</Button>
4. </Col>
5. <Col span="6">
6. <Button to="https://blog.csdn.net/qq_41464123" type="warning"  shape="circle" replace>无痕浏览</Button>
7. </Col>
8. <Col span="6">
9. <Button to="https://blog.csdn.net/qq_41464123" type="warning"  shape="circle" target="_blank">新标签访问</Button>
10. </Col>
11. </Row>

以上就是 View UI 的 Button 组件常用的功能配置。

附：事件完整代码

1. <template>
2. <div class="hello">
3. <Divider> ZWZ普通传值 </Divider>
4. <Row :gutter="32">
5. <Col span="6">
6. <Button type="warning"  shape="circle" @click="clickTest">无传输值</Button>
7. </Col>
8. <Col span="6">
9. <Button type="warning"  shape="circle" @click="clickTest(3.14159)">传输数字</Button>
10. </Col>
11. <Col span="6">
12. <Button type="warning"  shape="circle" @click="clickTest(testData)">传输动态内容</Button>
13. </Col>
14. </Row>
15. <Divider> ZWZ循环渲染 </Divider>
16. <Row :gutter="32">
17. <Col span="6" v-for="(item,index) in userList" :key="index">
18. <Button type="warning"  shape="circle" @click="clickTest(item)">循环渲染传值{{index}}</Button>
19. </Col>
20. </Row>
21. <Divider> ZWZ测试结束 </Divider>
22. </div>
23. </template>
24. 
25. <script>
26. export default {
27. name: 'test',
28. data() {
29. return {
30. testData: '传输值',
31. userList: [
32.         {id: 1,name: 'ZWZ1'},
33.         {id: 2,name: 'ZWZ2'},
34.         {id: 3,name: 'ZWZ3'}
35.       ]
36.     }
37.   },
38. methods: {
39. clickTest(e) {
40. console.log(e);
41.     }
42.   }
43. }
44. </script>
45. 
46. <style scoped>
47. .hello {
48. background-color: rgb(224, 249, 250);
49. }
50. </style>

附：样式完整Vue代码

1. <template>
2. <div class="hello">
3. <Divider> 基础按钮 </Divider>
4. <Row :gutter="32">
5. <Col span="2">
6. <Button>按钮01</Button>
7. </Col>
8. <Col span="2">
9. <Button type="primary">按钮02</Button>
10. </Col>
11. <Col span="2">
12. <Button type="dashed">按钮03</Button>
13. </Col>
14. <Col span="2">
15. <Button type="text">按钮04</Button>
16. </Col>
17. <Col span="2">
18. <Button type="info">按钮05</Button>
19. </Col>
20. <Col span="2">
21. <Button type="success">按钮06</Button>
22. </Col>
23. <Col span="2">
24. <Button type="warning">按钮07</Button>
25. </Col>
26. <Col span="2">
27. <Button type="error">按钮08</Button>
28. </Col>
29. </Row>
30. <Divider> 幽灵按钮 </Divider>
31. <Row :gutter="32">
32. <Col span="2">
33. <Button ghost>按钮11</Button>
34. </Col>
35. <Col span="2">
36. <Button type="primary" ghost>按钮12</Button>
37. </Col>
38. <Col span="2">
39. <Button type="dashed" ghost>按钮13</Button>
40. </Col>
41. <Col span="2">
42. <Button type="text" ghost>按钮14</Button>
43. </Col>
44. <Col span="2">
45. <Button type="info" ghost>按钮15</Button>
46. </Col>
47. <Col span="2">
48. <Button type="success" ghost>按钮16</Button>
49. </Col>
50. <Col span="2">
51. <Button type="warning" ghost>按钮17</Button>
52. </Col>
53. <Col span="2">
54. <Button type="error" ghost>按钮18</Button>
55. </Col>
56. </Row>
57. <Divider> 圆角按钮 </Divider>
58. <Row :gutter="32">
59. <Col span="2">
60. <Button shape="circle">按钮21</Button>
61. </Col>
62. <Col span="2">
63. <Button type="primary" shape="circle">按钮22</Button>
64. </Col>
65. <Col span="2">
66. <Button type="dashed" shape="circle">按钮23</Button>
67. </Col>
68. <Col span="2">
69. <Button type="text" shape="circle">按钮24</Button>
70. </Col>
71. <Col span="2">
72. <Button type="info" shape="circle">按钮25</Button>
73. </Col>
74. <Col span="2">
75. <Button type="success" shape="circle">按钮26</Button>
76. </Col>
77. <Col span="2">
78. <Button type="warning" shape="circle">按钮27</Button>
79. </Col>
80. <Col span="2">
81. <Button type="error" shape="circle">按钮28</Button>
82. </Col>
83. </Row>
84. <Divider> 带图标圆角按钮 </Divider>
85. <Row :gutter="32">
86. <Col span="2">
87. <Button shape="circle" icon="ios-wifi">按钮31</Button>
88. </Col>
89. <Col span="2">
90. <Button type="primary" shape="circle" icon="ios-wifi">按钮32</Button>
91. </Col>
92. <Col span="2">
93. <Button type="dashed" shape="circle" icon="ios-wifi">按钮33</Button>
94. </Col>
95. <Col span="2">
96. <Button type="text" shape="circle" icon="ios-wifi">按钮34</Button>
97. </Col>
98. <Col span="2">
99. <Button type="info" shape="circle" icon="ios-wifi">按钮35</Button>
100. </Col>
101. <Col span="2">
102. <Button type="success" shape="circle" icon="ios-wifi">按钮36</Button>
103. </Col>
104. <Col span="2">
105. <Button type="warning" shape="circle" icon="ios-wifi">按钮37</Button>
106. </Col>
107. <Col span="2">
108. <Button type="error" shape="circle" icon="ios-wifi">按钮38</Button>
109. </Col>
110. </Row>
111. <Divider> 纯图标圆角按钮 </Divider>
112. <Row :gutter="32">
113. <Col span="2">
114. <Button shape="circle" icon="ios-wifi"></Button>
115. </Col>
116. <Col span="2">
117. <Button type="primary" shape="circle" icon="ios-wifi"></Button>
118. </Col>
119. <Col span="2">
120. <Button type="dashed" shape="circle" icon="ios-wifi"></Button>
121. </Col>
122. <Col span="2">
123. <Button type="text" shape="circle" icon="ios-wifi"></Button>
124. </Col>
125. <Col span="2">
126. <Button type="info" shape="circle" icon="ios-wifi"></Button>
127. </Col>
128. <Col span="2">
129. <Button type="success" shape="circle" icon="ios-wifi"></Button>
130. </Col>
131. <Col span="2">
132. <Button type="warning" shape="circle" icon="ios-wifi"></Button>
133. </Col>
134. <Col span="2">
135. <Button type="error" shape="circle" icon="ios-wifi"></Button>
136. </Col>
137. </Row>
138. <Divider> 大尺寸圆角按钮 </Divider>
139. <Row :gutter="32">
140. <Col span="2">
141. <Button shape="circle" icon="ios-wifi" size="large">按钮51</Button>
142. </Col>
143. <Col span="2">
144. <Button type="primary" shape="circle" icon="ios-wifi" size="large">按钮52</Button>
145. </Col>
146. <Col span="2">
147. <Button type="dashed" shape="circle" icon="ios-wifi" size="large">按钮53</Button>
148. </Col>
149. <Col span="2">
150. <Button type="text" shape="circle" icon="ios-wifi" size="large">按钮54</Button>
151. </Col>
152. <Col span="2">
153. <Button type="info" shape="circle" icon="ios-wifi" size="large">按钮55</Button>
154. </Col>
155. <Col span="2">
156. <Button type="success" shape="circle" icon="ios-wifi" size="large">按钮56</Button>
157. </Col>
158. <Col span="2">
159. <Button type="warning" shape="circle" icon="ios-wifi" size="large">按钮57</Button>
160. </Col>
161. <Col span="2">
162. <Button type="error" shape="circle" icon="ios-wifi" size="large">按钮58</Button>
163. </Col>
164. </Row>
165. <Divider> 拉长型圆角按钮 </Divider>
166. <Row :gutter="32">
167. <Col span="2">
168. <Button shape="circle" icon="ios-wifi" size="large" long>按钮61</Button>
169. </Col>
170. <Col span="2">
171. <Button type="primary" shape="circle" icon="ios-wifi" size="large" long>按钮62</Button>
172. </Col>
173. <Col span="2">
174. <Button type="dashed" shape="circle" icon="ios-wifi" size="large" long>按钮63</Button>
175. </Col>
176. <Col span="2">
177. <Button type="text" shape="circle" icon="ios-wifi" size="large" long>按钮64</Button>
178. </Col>
179. <Col span="2">
180. <Button type="info" shape="circle" icon="ios-wifi" size="large" long>按钮65</Button>
181. </Col>
182. <Col span="2">
183. <Button type="success" shape="circle" icon="ios-wifi" size="large" long>按钮66</Button>
184. </Col>
185. <Col span="2">
186. <Button type="warning" shape="circle" icon="ios-wifi" size="large" long>按钮67</Button>
187. </Col>
188. <Col span="2">
189. <Button type="error" shape="circle" icon="ios-wifi" size="large" long>按钮68</Button>
190. </Col>
191. </Row>
192. <Divider> 加载按钮 </Divider>
193. <Row :gutter="32">
194. <Col span="2">
195. <Button shape="circle" icon="ios-wifi" size="large" loading>按钮71</Button>
196. </Col>
197. <Col span="2">
198. <Button type="primary" shape="circle" icon="ios-wifi" size="large" loading>按钮72</Button>
199. </Col>
200. <Col span="2">
201. <Button type="dashed" shape="circle" icon="ios-wifi" size="large" loading>按钮73</Button>
202. </Col>
203. <Col span="2">
204. <Button type="text" shape="circle" icon="ios-wifi" size="large" loading>按钮74</Button>
205. </Col>
206. <Col span="2">
207. <Button type="info" shape="circle" icon="ios-wifi" size="large" loading>按钮75</Button>
208. </Col>
209. <Col span="2">
210. <Button type="success" shape="circle" icon="ios-wifi" size="large" loading>按钮76</Button>
211. </Col>
212. <Col span="2">
213. <Button type="warning" shape="circle" icon="ios-wifi" size="large" loading>按钮77</Button>
214. </Col>
215. <Col span="2">
216. <Button type="error" shape="circle" icon="ios-wifi" size="large" loading>按钮78</Button>
217. </Col>
218. </Row>
219. <Divider> 禁用按钮 </Divider>
220. <Row :gutter="32">
221. <Col span="2">
222. <Button shape="circle" icon="ios-wifi" size="large" disabled>按钮81</Button>
223. </Col>
224. <Col span="2">
225. <Button type="primary" shape="circle" icon="ios-wifi" size="large" disabled>按钮82</Button>
226. </Col>
227. <Col span="2">
228. <Button type="dashed" shape="circle" icon="ios-wifi" size="large" disabled>按钮83</Button>
229. </Col>
230. <Col span="2">
231. <Button type="text" shape="circle" icon="ios-wifi" size="large" disabled>按钮84</Button>
232. </Col>
233. <Col span="2">
234. <Button type="info" shape="circle" icon="ios-wifi" size="large" disabled>按钮85</Button>
235. </Col>
236. <Col span="2">
237. <Button type="success" shape="circle" icon="ios-wifi" size="large" disabled>按钮86</Button>
238. </Col>
239. <Col span="2">
240. <Button type="warning" shape="circle" icon="ios-wifi" size="large" disabled>按钮87</Button>
241. </Col>
242. <Col span="2">
243. <Button type="error" shape="circle" icon="ios-wifi" size="large" disabled>按钮88</Button>
244. </Col>
245. </Row>
246. <Divider> 按钮组合 </Divider>
247. <Row :gutter="32">
248. <Col span="4">
249. <ButtonGroup>
250. <Button shape="circle" icon="ios-wifi" size="large">按钮91-1</Button>
251. <Button type="primary" shape="circle" icon="ios-wifi" size="large">按钮91-2</Button>
252. </ButtonGroup>
253. </Col>
254. <Col span="8">
255. <ButtonGroup size="large">
256. <Button type="dashed" shape="circle" icon="ios-wifi" size="large">按钮92-1</Button>
257. <Button type="text" shape="circle" icon="ios-wifi" size="large">按钮92-2</Button>
258. <Button type="info" shape="circle" icon="ios-wifi" size="large">按钮92-3</Button>
259. <Button type="success" shape="circle" icon="ios-wifi" size="large">按钮92-4</Button>
260. </ButtonGroup>
261. </Col>
262. <Col span="4">
263. <ButtonGroup>
264. <Button type="warning" shape="circle" icon="ios-wifi" size="large">按钮93-1</Button>
265. <Button type="error" shape="circle" icon="ios-wifi" size="large">按钮93-2</Button>
266. </ButtonGroup>
267. </Col>
268. </Row>
269. </div>
270. </template>
271. 
272. <script>
273. export default {
274. name: 'test',
275. }
276. </script>
277. 
278. <style scoped>
279. .hello {
280. background-color: rgb(224, 249, 250);
281. }
282. </style>

Vue组件库 View UI 来看看这80种奇奇怪怪的按钮

一、按钮样式

1.1 颜色

1.2 大小

1.3 按钮形状

1.4 背景透明

1.5 按钮图标

1.6 其他样式

二、按钮事件

2.1 按钮传值

2.1.1 无传输值单击事件

2.1.2 传输静态参数

2.1.3 传递动态参数

2.1.4 循环渲染传参

2.2 按钮跳转

热门文章

最新文章

相关课程

相关电子书

Vue组件库 View UI 来看看这80种奇奇怪怪的按钮

一、按钮样式

1.1 颜色

1.2 大小

1.3 按钮形状

1.4 背景透明

1.5 按钮图标

1.6 其他样式

二、 按钮事件

2.1 按钮传值

2.1.1 无传输值单击事件

2.1.2 传输静态参数

2.1.3 传递动态参数

2.1.4 循环渲染传参

2.2 按钮跳转

热门文章

最新文章

相关课程

相关电子书

二、按钮事件