element-ui button layout container input

在项目里经常使用element-ui，有点好奇一个工业级的组件库怎么实现的。

首先

从github clone element-ui的源码

1	git clone https://github.com/ElemeFE/element.git

element-ui的源码结构如下：

CHANGELOG.en-US.md LICENSE            element_logo.svg   src
CHANGELOG.es.md    Makefile           examples           test
CHANGELOG.fr-FR.md README.md          node_modules       types
CHANGELOG.zh-CN.md build              package.json       yarn.lock
FAQ.md             components.json    packages

组件的源码在packages目录下，使用make dev可以运行examples目录下的样例代码，通过http://127.0.0.1:8085/来访问。在examples引用了packages里面的组件，这样修改里面的组件立马可以看到效果。scss文件在packages/theme-chalk中。

Element-UI BEM命名

在element-ui中css的命名方式使用BEM（block、element、modified）方式。将所有东西划分为独立的模块，block承载了element，modified表达状态。在BEM中，使用双下划线连接Block和Element，比如menu__item。使用单下划线连接Block和Modified或者连接Element和Modified，比如menu_active。当这个组件需要多个单词来描述时，就用-中划线来连接多个单词，比如start-menu。

在theme-chalk/src/mixins/mixin.scss中定义了针对BEM格式的mixin。

对于block，传入名称后被替换成el-名称。

@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

对于element，将类名改为.el-row__unit，@content表示之后@include里面包括的属性。

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

对于modifer，类名改为el-row—-flex,

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

Layout布局组件

layout是由ElRow、ElCol组成。

El-Row

El-Row有5个属性，默认是一个div块，通过tag来改变由什么实现。

gutter：设置列之间的间隔。配置后，El-Col会读取父节点的gutter属性，也就是El-Col的gutter来设置与其他列之间padding。

type：设置display为flex布局。这样就可以设置Row中的元素按照什么形式进行对齐。

El-Col

El-Col配合El-Row实现栅栏布局，关键在于pacages/theme-chalk/src/col.scss中，将每一行分割为24等份。

默认使用float:left。当Row使用flex后变为弹性项目。

@for $i from 0 through 24 {
  .el-col-#{$i} {
    width: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-offset-#{$i} {
    margin-left: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-pull-#{$i} {
    position: relative;
    right: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-push-#{$i} {
    position: relative;
    left: (1 / 24 * $i * 100) * 1%;
  }
}

Container布局容器组件

布局容器组件包括：container、header、aside、main、footer。

Container：使用flex布局，通过一个计算属性isVertical来修改子元素方向。内部使用<section></section>
Header：内部使用<header></header>实现。表示section的页眉。
Aside：内部使用<aside></aside>实现，表示侧边栏，存放相关资料、标签。
Main：内部使用<main></main>实现
Footer：内部使用<footer></footer>实现，表示section的页脚。

之所以这么实现，为了web语意化，也就是让正确的标签做正确的事情。便于浏览器搜索引擎解析，利于爬虫标记、利于SEO。

Icon图标组件

直接通过el-icon-iconName来使用。

组件代码在/packages/icon/src/中，其中icon是<i :class="'el-icon-'+name"></i>。关键在icon的scss文件。

这里使用的一种技术叫webfont，比如下面的编辑图标：

1
2
3

.el-icon-edit:before {
    content: "\e78c";
}

在unicode中E000到F8FF属于用户造字区，elementui首先在icon.scss中通过@font-face下载elementui自己的字体，这个字体里有自定义的矢量图标。

@font-face {
  font-family: 'element-icons';
  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal
}

然后所有的el-icon都会使用这个叫element-icons的字体。

[class^="el-icon-"], [class*=" el-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'element-icons' !important;
}

这个字体文件中编号E78C是一个edit的图标。

Button按钮组件

El-button内部使用的是<button></button>。包含属性：

type：通过type组合成class: el-button—primary来切换样式。
size、loading、disabled、plain、autofocus、round、circle控制相关样式。

里面少见的是vue对象的inject属性：elForm、elFormItem。

elForm是由ElForm这个祖先组件提供，向所有后代提供表格这个组件的访问。而elFormItem是由ElFormItem提供。之所以提供这两个依赖是因为button常常用于表格中，所以需要统一大小。

可以看到对button的原生click事件捕获同时emit click event给el-button的父节点。这样在外部使用el-button时就不需要专门写@click.native修饰符，之所以这样因为v-on默认认为的click事件是自定义事件。

<template>
  <button
    class="el-button"
    @click="handleClick"
  >
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: 'ElButton',

    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  };
</script>

Input组件

Input组件分为两种：一种是普通input、另一种是textarea。

Element UI Mixins

Element-ui通过mixins给input 组件添加了broadcast、dispatch两个函数，broadcast用于祖先组件向指定的子组件emit事件，dispatch用于子组件向祖先组件emit事件。

普通input组件

首先，从结构来说，input前后分别可以添加prepend、append，用于比如按钮和标签这样的需求。对于input中的内容，包含前置内容、后置内容.

<template>
  <div 
   
  >
    <template v-if="type !== 'textarea'">
      <!-- 前置元素 -->
      <div class="el-input-group__prepend" v-if="$slots.prepend">
        <slot name="prepend"></slot>
      </div>
      <input> <!-- Input输入 -->
      <!-- 前置内容 -->
      <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
        <slot name="prefix"></slot>
        <i class="el-input__icon"
           v-if="prefixIcon"
           :class="prefixIcon">
        </i>
      </span>
      <!-- 后置内容 -->
      <span
        class="el-input__suffix">
        <span class="el-input__suffix-inner">
          <template v-if="!showClear || !showPwdVisible">
            <slot name="suffix"></slot>
          </template>          
        </span>
      </span>
      <!-- 后置元素 -->
      <div class="el-input-group__append" v-if="$slots.append">
        <slot name="append"></slot>
      </div>
    </template>
  </div>
</template>

input会监听的事件有：

input事件：每当输入的时候都会触发。
change事件：当input失去焦点且内容改变时触发。
blur事件：当input失去焦点时触发。

composition事件：复合事件，当用手机输入法时，会显示选择框，选择框打开也就是compositionstart事件，选择好就是compositionend事件，因为在输入时也会触发input事件，所以应该等选择好输入的词后在进行handleInput()。

handleInput(event) {
	if (this.isOnComposition) return; // 当composition事件完成时，再进行之后的逻辑
	this.$emit('input', event.target.value);
	this.$nextTick(() => {
     let input = this.getInput();
     	input.value = this.value;
     });
},

值验证：

与button一样，当input放在form中时，被注入ElForm和ElFormItem，并有一个watcher监听value的变化，每当发生变化便会dispatch到父节点ElForm，同时验证value合法。

input组件属性：

对于没有写入props的属性，input使用v-bind="$attrs"来绑定

Textarea组件

textarea最复杂的功能是根据内容增多使得组件的高度变大。通过watcher监听value的变化：

watch: {
      value(val) {
        this.$nextTick(this.resizeTextarea);
      }
    },

每次变化都会调用this.resizeTextarea，然后计算textarea在当前行高下的整体高度

export default function calcTextareaHeight(
  targetElement, minRows = 1, maxRows = null
) {
  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';

  let height = hiddenTextarea.scrollHeight; // 获得的高度就是scrollHeight
  const result = {};
  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

  if (minRows !== null) {
    let minHeight = singleRowHeight * minRows;
    height = Math.max(minHeight, height);
    result.minHeight = `${ minHeight }px`;
  }
  if (maxRows !== null) {
    let maxHeight = singleRowHeight * maxRows;
    height = Math.min(maxHeight, height);
  }
  result.height = `${ height }px`;
  return result;
};

计算过程：首先创建隐藏textarea，将内容放入其中，看看scrollHeight是多少，将textarea的高度设置为这个值。如果指定minRows、maxRows时，textarea的高度就是scrollHeight的高度

总结

感觉写一个组件库需要考虑好多细节，这个就很难，得有很多经验才行。