好家伙,为了有足够的能力去开发组件,先研究一下别人的组件
开始抄袭模仿我们的行业标杆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里面的值绑的是什么鬼了
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` 不存在也不会导致程序崩溃，而是安全地访问属性并返回结果。
<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 属性定义了按钮的类型， 指定了按钮的行为和样式复制
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> -->复制
答:当同一个元素同时存在 class 和 :class 属性时，class 属性中的类名会与 :class 动态计算的类名进行合并，
但是 :class 的优先级更高。:class 中定义的类名会覆盖 class 中的类名。
autofocus属性是HTML中用于设置按钮自动聚焦的属性。
当页面加载完成后，被设置为autofocus的按钮将自动获取焦点，无需用户操作。
这可以提供用户友好的交互，特别是当页面上有多个按钮时，自动聚焦可以使页面更易于导航。
使用autofocus属性的语法如下所示：
<button autofocus>Submit</button>复制
在这个例子中，当页面加载完成后，提交按钮将自动获得焦点，用户可以直接通过按下回车键来提交表单（如果有,登陆注册）。
methods: { handleClick(evt) { this.$emit('click', evt); } //触发'click'方法,并将evt作为参数传入 }复制
触发自定义方法click,将evt作为参数传入