读elementui源码第二天

以最简单的Button组件为例，看看里面写了什么。

一、入口文件

1. 入口文件导入并导出了button组件

import ElButton from './src/button';

/* istanbul ignore next */
ElButton.install = function(Vue) {
  Vue.component(ElButton.name, ElButton);
};

export default ElButton;

2.组件上挂载了install函数，内容为注册ElButton组件。

3.项目中使用时，如果按需引入，ElButton已被导出，所以main.js中导入并注册，就可使用。

import { Button} from 'element-ui';
Vue.component(Button.name, Button);

4.或者使用Vue.use(Button)，因为组件入口已经挂载了install函数并实现了注册

import { Button} from 'element-ui';
Vue.use(Button);

二、具体功能

1.按钮接受如下属性，包括按钮类型、尺寸、图标、原生type属性、是否禁用等。

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
    },

2.模板部分

<template>
  <button :disabled="disabled" class="el-button"
    @click="handleClick"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      size ? 'el-button--' + size : '',
      {
        'is-disabled': disabled,
        'is-loading': loading,
        'is-plain': plain
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
    /* *知识点：$slots.default 是指非具名的插槽，比如按钮中的文字内容，会渲染在这里 */
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

3.样式

@charset "UTF-8";
@import "./common/var.css";
@import './mixins/button';

@component-namespace el {
  @b button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: var(--button-default-fill);
    border: var(--border-base);
    color: var(--button-default-color);
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    @utils-user-select none;
    & + .el-button {
      margin-left: 10px;
    }
    

看不懂，需要postcss、postcss-salad相关知识，才能看懂