山寨ElementUI之el-button,手写按钮组件
ElementUI是一款非常流行的vue插件库,整合了开发中大多数的组件。最近正好在学习vue,就尝试简单模拟一下el-button的实现。最近正好在学习vue,就尝试简单模拟一下el-button的实现。引入vue核心js<script src="vue.js"></script>2.用Vue.component语法设置全局插件Vue.component('elButto
ElementUI是一款非常流行的vue插件库,整合了开发中大多数的组件。
最近正好在学习vue,就尝试简单模拟一下el-button的实现。
最近正好在学习vue,就尝试简单模拟一下el-button的实现。
- 引入vue核心js
<script src="vue.js"></script>
2.用Vue.component语法设置全局插件
Vue.component('elButton', {
name: 'elButton',
props: {
type: {
type: String,
default: "default"
}
},
data() {
return {}
},
template: `
< button :class="'el-button el-button--' + type" @click="triggerClick">
<slot></slot>
< /button>
`,
mounted() {
},
methods: {
triggerClick(){
this.$emit('click', "模拟参数");
}
},
});
3.调用过程
<el-button type="primary" @click="add">新增</el-button>
<el-button type="warning">修改</el-button>
<el-button type="danger">删除</el-button>
4.如何控制按钮颜色的?
核心就在于这一段代码:
<button :class="'el-button el-button--' + type" @click="triggerClick">
type是外部组件传进来的参数,这边就直接字符串拼接了。然后会对应到具体的class
/*el-button组件样式*/
.el-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
border-color: #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.el-button--default {
}
.el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.el-button--success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
.el-button--warning {
color: #fff;
background-color: #e6a23c;
border-color: #e6a23c;
}
.el-button--danger {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
}
如果不传type,就是default。
5.如何实现点击事件?
外部组件直接放心地添加@click事件,然后el-button组件内部用$emit去触发即可。
6.$emit的原理是啥?
这是vue内部去做的,不过也可以手动替换Vue原型链的$emit方法:
Vue.prototype.$emit = function (event) {
let _events = this._events;
let cbs = _events[event];
if (cbs) {
cbs[0].apply(app, [arguments].splice(1));
}
}
这是一个简单的实现,实际实现会更加复杂。
this就指向当前的Vue实例,也是页面中唯一的那个vue实例,_events是所有设置的方法和事件,比如你写在methods里面的add方法。
思路还是很直白的,就是遍历所有事件,看看当前触发的是哪一个事件,找到了就直接用apply去调用。为啥用apply而不用call?源码就这么写的,用call其实也一样,只不过后面的参数不能用数组了,要用变长参数。好像是这样的,具体不记得了。
得到的event竟然是一个数组,搞不懂为啥vue要这么设计。
更多推荐
所有评论(0)