在看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框架樣式詳細篇。

轉載于:https://www.cnblogs.com/hetaojs/p/9523163.html

總結

以上是生活随笔為你收集整理的elementUi、iview、ant Design源码button结构篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。