element-ui alert组件源码学习

2018年09月27日Web前端0

我们不能仅仅只做代码的搬运工，需要去了解与学习自己所用的工具。现在开始学习element-ui库各个组件是如何实现的。对应的版本是2.4.6。首先从比较简单的alert组件开始。

一、html

先看html结构

<transition name="el-alert-fade">
  <div
    class="el-alert"
    :class="[typeClass, center ? 'is-center' : '']"
    v-show="visible"
    role="alert"
  >
    <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
    <div class="el-alert__content">
      <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{ { title }}</span>
      <slot>
        <p class="el-alert__description" v-if="description">{ { description }}</p>
      </slot>
      <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{ {closeText}}</i>
    </div>
  </div>
</transition>

整个alert都被放在了transition组件中，这是vue中的一个过渡效果组件，此处先跳过，后面在看。接下去是真正alert组件的外层框，自定义了两个样式，一个控制alert组件是什么类型的（颜色图标由类型控制），另一个控制alert内容是否居中。还有个visible控制组件的显示与隐藏。

往内部，第一个i元素是alert组件的图标，由showIcon控制显示与隐藏，样式由iconClass与isBigIcon控制，iconClass也是有type控制的，

iconClass() {
  return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
}

通过对TYPE_CLASSES_MAP遍历拿到icon的calss样式，无则使用默认的'el-icon-info'类型。这儿为啥不将'el-icon-info'这个class类型写进TYPE_CLASSES_MAP中，个人认为是与type为default对应吧，所以将其留在了对象之外。

而isBigIcon则对description和slots下是否有元素的判断决定是否是使用大标签。

标签之后，就是alert组件的实际显示的内容了，从class的命名上也看的出。isBoldTitle与isBigIcon的判断条件相同，当出现辅助内容时，就加粗显示。

接下来的slot标签，优先显示el-alert标签内的内容，如果没有，再看description是否有值，前两种任意一种情况都会使用大图标，都没有则不显示。

后面一个i标签用来默认显示右上角的X按钮，用于关闭alert组件的，你也可以通过修改closeText，将X替换成你想要的文字或者其他东西。绑定了click事件在关闭时会触发组件外绑定的close事件。

html的话就这些，主要是一些class的控制和元素及内容的显示，事件的话就是关闭alert的click事件。

二、JS部分

受使用者控制的参数有title、description、type、closable、closeText、showIcon、center这几个参数，看表面意思以及结合对应在html中的位置就知道他们的作用了，也可以看下代码的注释。

data中的话 只有个visible数据，控制关闭时，将alert隐藏。

computed的属性中，有对应的4个参数，涉及风格等等。

alert组件代码增加注释可查看：alert组件。

Element-uiVue源码解析纯原创

目录