element-ui button和button-group组件源码学习
继续看其他组件,接下来看下比较常用的button组件。 一、button组件html结构整个button组件是基于原生的button元素实现的。我们来看下这个元素的属性值。 class=”el-button”,el-button的样式。 @click=”handleClick”,按钮的click事件。 :disabled=”buttonDisabled || loading”,当按钮的使能或者loading时,disabled生效。 :autofocus=”autofocus”,是否自动聚焦。 :type=”nativeType”,原生的type属性,控制type的实际类型。 class则是一些样式的控制,不一一举例了,命名也大致可以看出了。 紧接着是一个loading时的icon图标。后面则是一个button图标。 接下来的span元素则存放着按钮的显示文字。 整个button的html就这么简单。 二、button组件JS部分name名称 inject注入elForm和elFormItem,当没有配合表单使用时,当作默认值使用。 props这些属性大多和样式的控制有关。
computed
methods
handleClick(evt) { // 触发当前实例上的click事件 // 比如我们外部使用时,可以直接增加click方法 this.$emit('click',evt); } button部分的代码实际还好比较简单,下面看下他的group组件。 三、button-group组件该组件与button组件配合使用,十分的简单,html部分的话,仅是在内嵌的button元素外嵌套了一层div元素。 JS的话,只是给组件增加了个name的名称属性。 带注释的源码下载路径:button组件和button-group组件。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |