在看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框架样式详细篇。

elementUi、iview、ant Design源码button结构篇的更多相关文章

  1. element-ui Collapse 折叠面板源码分析整理笔记(十)

    Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...

  2. 产品打包工具的制作,ant,编译源码,打jar包,打tag,打war包,备份release版本等

    1.  在进行打包工具的制作前,需要准备的软件有: svnant-1.3.1 作用是让ant和svn相关联 apache-ant-1.9.7 需要设置ant_home,path,我的配置是: ANT_ ...

  3. JUC并发编程基石AQS源码之结构篇

    前言 AQS(AbstractQueuedSynchronizer)算是JUC包中最重要的一个类了,如果你想了解JUC提供的并发编程工具类的代码逻辑,这个类绝对是你绕不过的.我相信如果你是第一次看AQ ...

  4. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  5. 修改ElementUI源码实践

    提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...

  6. element-ui 组件源码分析整理笔记目录

    element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...

  7. Tomcat源码导入eclipse的步骤

    Tomcat源码导入eclipse 一.下载源码 1.  进入Apache 官网:http://tomcat.apache.org/ 2.  在左边侧选择要下载的源码的版本. 3.  或者直接通过Ar ...

  8. 基于MVVM的知乎日报应用安卓源码

    使用data binding , dagger2 , retrofit2和rxjava实现的,基于MVVM的知乎日报APP运行效果: <ignore_js_op> 使用说明: 项目结构 a ...

  9. Memcached源码分析之从SET命令开始说起

    作者:Calix 如果直接把memcached的源码从main函数开始说,恐怕会有点头大,所以这里以一句经典的“SET”命令简单地开个头,算是回忆一下memcached的作用,后面的结构篇中关于命令解 ...

随机推荐

  1. 吴恩达机器学习笔记58-协同过滤算法(Collaborative Filtering Algorithm)

    在之前的基于内容的推荐系统中,对于每一部电影,我们都掌握了可用的特征,使用这些特征训练出了每一个用户的参数.相反地,如果我们拥有用户的参数,我们可以学习得出电影的特征. 但是如果我们既没有用户的参数, ...

  2. Linux 中查看进程及资源使用情况

    top 自带的 top 命令类似于平时我们使用的任务管理器,能够列出当前系统中的进程及资源的使用情况. $ man top top - display Linux tasks 使用起来很简单,不加任何 ...

  3. 卷积神经网络 CNN 学习笔记

    激活函数Relu 最近几年卷积神经网络中,激活函数往往不选择sigmoid或tanh函数,而是选择relu函数.Relu函数的定义 $$f(x)= max(0,x)$$ Relu函数图像如下图所示: ...

  4. Scrum Mastery:有效利用组织的5个步骤

    组织以什么样的方式能最大限度的发挥Scrum的优势?组织在哪些方面阻碍了个人的发展?Scrum是一种能使业务变得敏捷的框架.而组织恰恰需要变得敏捷.只是,组织本身有时候并没有足够的能力来帮助Scrum ...

  5. pwnable.tw applestore 分析

    此题第一步凑齐7174进入漏洞地点 然后可以把iphone8的结构体中的地址通过read修改为一个.got表地址,这样就能把libc中该函数地址打出来.这是因为read函数并不会在遇到\x00时截断( ...

  6. Linux 命令行

    Linux 命令笔记 一.目录/文件 1.1 目录文件日常操作 . -> 当前目录 .. -> 上一级目录 .file/.dir -> 隐藏文件/文件夹 [ls] 查看指定目录文件 ...

  7. javascript 倒计数功能

    最近在项目中遇到一个倒计时功能,在网上没有找到合适的,就自己写了个方法.贴在这里,权且当个记录. export const timeRun = (timeStr, callBack) => { ...

  8. sql 查询 某字段 重复次数 最多的记录

    需求  查询小时气象表中 同一日期.同一城市.同意检测站点  首要污染物出现出书最多的记录 第一步: 添加 排序字段 select StationID,RecordDate,CityID,Primar ...

  9. c# API接受图片文件以Base64格式上传图片

    /// base64上传图片 /// </summary> /// <returns>成功上传返回上传后的文件名</returns> [HttpPost] publ ...

  10. Java 数组及数组常用算法

    1 数组也是一种类型 Java中要求所有的数组元素具有相同的数据类型.因此在一个数组中,数组元素的类型是唯一的,不能存储多种类型的数据. 一旦数组的初始化完成,数组在内存中所占的空间将被固定下来,因此 ...