好家伙,为了有足够的能力去开发组件,先研究一下别人的组件
开始抄袭模仿我们的行业标杆element-ui
找到Button组件的源码
只有三个文件,看上去非常易读,开搞
其中最重要的部分,自然是button.vue
<template>
<button
class="el-button"
@click="handleClick"
:disabled="buttonDisabled || loading"
:autofocus="autofocus"
:type="nativeType"
:class="[
type ? 'el-button--' + type : '',
buttonSize ? 'el-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-loading': loading,
'is-plain': plain,
'is-round': round,
'is-circle': circle
}
]"
>
<i class="el-icon-loading" v-if="loading"></i>
<i :class="icon" v-if="icon && !loading"></i>
<span v-if="$slots.default"><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'ElButton',
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
props: {
type: {
type: String,
default: 'default'
},
size: String,
icon: {
type: String,
default: ''
},
// 图标样式
nativeType: {
type: String,
default: 'button'
},
loading: Boolean,
disabled: Boolean,
plain: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean
},
computed: {
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
buttonSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
buttonDisabled() {
return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
}
},
methods: {
handleClick(evt) {
this.$emit('click', evt);
}
}
};
</script>
既然是.vue那么我们把它分成DOM,属性,方法三部分来分析
我们首先看属性,看完属性,你自然知道DOM里面的值绑的是什么鬼了
1.属性
name: 'ElButton',
//inject用于接收父组件的传值,然而我并找到传这个值的父组件
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
props: {
//按钮大样式
type: {
type: String,
default: 'default'
},
//大小选择
size: String,
//图标选择
icon: {
type: String,
default: ''
},
// 按钮小样式
nativeType: {
type: String,
default: 'button'
},
loading: Boolean, //是否加载中状态
disabled: Boolean, //是否禁用状态
plain: Boolean, //是否朴素按钮
autofocus: Boolean,//是否默认聚焦
round: Boolean, //是否圆角按钮
circle: Boolean//是否圆形
},
computed: {
//父组件的值,
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
//按钮尺寸属性
//其中,在越左边的属性优先级越高,size的属性优先级最高
buttonSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
//按钮是否禁用
buttonDisabled() {
return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
//this.$options.propsData 是一个包含了组件实例的 props 数据的对象。
//hasOwnProperty('disabled') 是 JavaScript 中的一个方法，用于判断对象是否具有某个属性。
}
},
总体看上去没有什么难理解的点,但还是有几个地方要注意
问题一:在计算属性computed中
//父组件的值,
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
为什么是
(this.elFormItem || {}).elFormItemSize;
而不直接写成
this.elFormItem.elFormItemSize
答:
这段代码使用`(this.elFormItem || {}).elFormItemSize`的形式来获取 `elFormItemSize`属性的值。
`(this.elFormItem || {})`的作用是先判断 this.elFormItem 是否存在，
如果存在则返回 `this.elFormItem` 的值，否则返回一个空对象 `{}`。
在这种情况下，如果 `this.elFormItem` 不存在，那么后续对 `elFormItemSize` 的访问将会返回 `undefined`。
这种写法是为了避免在 `this.elFormItem` 为 `null` 或 `undefined` 的情况下访问 `elFormItemSize` 属性时出现报错。
通过使用短路运算符 `||` 和空对象 `{}`，可以确保代码的健壮性，
即,使 `this.elFormItem` 不存在也不会导致程序崩溃，而是安全地访问属性并返回结果。
第二部分:DOM
<template> <button class="el-button" @click="handleClick" :disabled="buttonDisabled || loading" :autofocus="autofocus" :type="nativeType" :class="[ type ? 'el-button--' + type : '', buttonSize ? 'el-button--' + buttonSize : '', { 'is-disabled': buttonDisabled, 'is-loading': loading, 'is-plain': plain, 'is-round': round, 'is-circle': circle } ]" > <i class="el-icon-loading" v-if="loading"></i> <i :class="icon" v-if="icon && !loading"></i> <span v-if="$slots.default"><slot></slot></span> </button> </template>
注释版本:
<!-- <button class="el-button" //样式
@click="handleClick" //点击事件
:disabled="buttonDisabled || loading" //disabled原生属性
//此布尔属性表示用户不能与 button 交互。
:autofocus="autofocus" //autofocus原生属性,一个布尔属性，
//用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。
:type="nativeType" //type原生属性,type 属性定义了按钮的类型， 指定了按钮的行为和样式
:class="[
type ? 'el-button--' + type : '', //那几个按钮样式,红的蓝的绿的
buttonSize ? 'el-button--' + buttonSize : '',//按钮大小
{
'is-disabled': buttonDisabled, //是否禁用状态
'is-loading': loading, //是否加载中状态
'is-plain': plain, //是否朴素按钮
'is-round': round, //是否圆角按钮
'is-circle': circle //是否圆形
}
]">
<i class="el-icon-loading" v-if="loading"></i> //是否显示加载中状态
<i :class="icon" v-if="icon && !loading"></i> //显示对应图标
<span v-if="$slots.default">
<slot></slot>
</span> //插槽用于渲染名字
</button> -->
2.1.问题一:"class"与:"class"的优先级?
答:当同一个元素同时存在 class 和 :class 属性时，class 属性中的类名会与 :class 动态计算的类名进行合并，
但是 :class 的优先级更高。:class 中定义的类名会覆盖 class 中的类名。
2.2.问题二:":class"中的样式如何渲染
1.type ? 'el-button--' + type : ' '：这个表达式根据type变量的值，生成一个按钮类型的class。
如果type有值（不为false、null、undefined、0或空字符串），则生成类似于el-button--type的class，否则生成空字符串。
2.buttonSize ? 'el-button--' + buttonSize : ' '：这个表达式根据buttonSize变量的值，生成一个按钮大小的class。
如果buttonSize有值，则生成类似于el-button--buttonSize的class，否则生成空字符串。
3.对象字面量{ }用于根据变量的真假值来动态添加/移除某些class。
根据以下变量的值，如果为真，则添加相应的class：'is-disabled'（按钮禁用状态），
'is-loading'（按钮加载中状态），'is-plain'（按钮朴素风格），'is-round'（按钮圆角风格），
'is-circle'（按钮圆形风格）。
2.3.关于原生属性autofocus的作用?
autofocus属性是HTML中用于设置按钮自动聚焦的属性。
当页面加载完成后，被设置为autofocus的按钮将自动获取焦点，无需用户操作。
这可以提供用户友好的交互，特别是当页面上有多个按钮时，自动聚焦可以使页面更易于导航。
使用autofocus属性的语法如下所示：
<button autofocus>Submit</button>
在这个例子中，当页面加载完成后，提交按钮将自动获得焦点，用户可以直接通过按下回车键来提交表单（如果有,登陆注册）。
第三部分:JS方法
methods: {
handleClick(evt) {
this.$emit('click', evt);
}
//触发'click'方法,并将evt作为参数传入
}
触发自定义方法click,将evt作为参数传入