山寨ElementUI之el-button，手写按钮组件_elbutton

ElementUI是一款非常流行的vue插件库，整合了开发中大多数的组件。

最近正好在学习vue，就尝试简单模拟一下el-button的实现。

最近正好在学习vue，就尝试简单模拟一下el-button的实现。

1. 引入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要这么设计。