element-ui alert组件源码学习

2018年09月27日Web前端

我们不能仅仅只做代码的搬运工,需要去了解与学习自己所用的工具。现在开始学习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';
}

通过对TYPECLASSESMAP遍历拿到icon的calss样式,无则使用默认的'el-icon-info'类型。这儿为啥不将'el-icon-info'这个class类型写进TYPECLASSESMAP中,个人认为是与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组件