elementUiiviewant Design源码button结构篇

Posted 2020-12-31 hetaojs

在看elementUI的button组件的时候，一起和iview、ant Design的button组件比
较功能、样式、代码结构，看他们的一些不同点，不同的写法哪种会好些，button的对外开放的功能那些会
用到哪些会相对比较好。
我们先来看这三个UI的button对外开放的功能结构：

• elementUI button:
  

• iview button:
  

• ant Design button:
  

可以看出iview和ant Desgin的button的功能很像，而element的button的功能少了个a标签的功能，感觉button转换a标签的功能用到的不多。后面看具体button样式代码会发现iview和ant Desgin更像，所有之前有看到说iview抄袭element感觉只是无中生有，那iview和ant Desgin到底是谁借鉴谁的也没必要深究，本身开源项目借鉴代码风格规范是很正常的，在加上一个常用组件常用功能翻来覆去就那些固定的。

三个UI的button样式结构：

• elementUI button.scss
  

• iview button.less
  

• ant Desgin button.less
  

我可以看到iview和ant Desgin的button的样式都是用less而且结构包括mixins和button、命名都非常相似，elementUI的button样式用sass来写的。后续计划解析组件分elementUI、iview、ant Desgin的整体功能、样式结构篇；elementUI、iview、ant Desgin的样式详细篇；elementUI、iview、ant Desgin的功能代码详细篇三部分入手。这篇就介绍button在三大UI框架的功能、样式整天结构。下一片就是看三大UI框架样式详细篇。