个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
25
4
好家伙,为了有足够的能力去开发组件,先研究一下别人的组件 。
开始 抄袭 模仿我们的行业标杆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作为参数传入 。
。
最后此篇关于Element-ui源码解析(二):最简单的组件Button的文章就讲到这里了,如果你想了解更多关于Element-ui源码解析(二):最简单的组件Button的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
25
4
0
我遇到过这个 html: 上面的html和这个有什么区别: 最佳答案 来自MDN page on the tag : 对于 type 的属性标签，可能的值是: 提交:按钮将表单数据提交给服务器
Button button= (Button) findViewbyID(R.id.button); 和 Button button = new Button(this); 有什么区别？ 最佳答案 有
我是一名优秀的程序员,十分优秀！