element源码解析(1) -- alert

样式

<transition name="el-alert-fade">
    <div
      class="el-alert"
      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
      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 || $slots.title">
          <slot name="title">{{ title }}</slot>
        </span>
        <p class="el-alert__description" v-if="$slots.default && !description"><slot></slot></p>
        <p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>
        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
      </div>
    </div>
  </transition>

class:

el-alert为默认样式
typeClass关联着primary,info,warning,success,error等类别的颜色
is-center: 根据center属性决定是否居中
is-effect:根据effect效果决定dark/light

icon默认为el-alert__icon,
showIcon决定是否显示
iconClass可选择其它icon
isBigIcon决定icon大小

icon-alert-content包括有无插槽的布局,分为标题插槽和内容插槽
标题插槽可以默认el-alert__title,默认isBoldTitle,可以自定义写入
内容都插槽沿用el-alert__description的样式,可以默认,可以自己单独用插槽写入
关闭按钮绝对定位于右上角,默认关闭图标el-alert__closebtn,根据是否具有closeText,来判断给予样式is-customed,根据closable,决定是否显示关闭

Slot

title并不是必填,但几乎都用成了必填

Name	Description
—	描述
title	标题的内容

<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
    <slot name="title">{{ title }}</slot>
</span>

样式相关属性

alert的属性基本都与样式相关

参数	说明	类型	可选值	默认值
title	标题	string	—	—
type	主题	string	success/warning/info/error	info
description	辅助性文字。也可通过默认 slot 传入	string	—	—
closable	是否可关闭	boolean	—	true
center	文字是否居中	boolean	—	true
close-text	关闭按钮自定义文本	string	—	—
show-icon	是否显示图标	boolean	—	false
effect	选择提供的主题	string	light/dark	light

props: {
      title: {
        type: String,
        default: ''
      },
      description: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'info'
      },
      closable: {
        type: Boolean,
        default: true
      },
      closeText: {
        type: String,
        default: ''
      },
      showIcon: Boolean,
      center: Boolean,
      effect: {
        type: String,
        default: 'light',
        validator: function(value) {
          return ['light', 'dark'].indexOf(value) !== -1;
        }
      }
    },

计算属性computed

计算属性里面基本上都与样式相关

computed: {
      typeClass() {
        return `el-alert--${ this.type }`;
      },

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

      isBigIcon() {
        return this.description || this.$slots.default ? 'is-big' : '';
      },

      isBoldTitle() {
        return this.description || this.$slots.default ? 'is-bold' : '';
      }
    }

数据定义Data

判断显示隐藏的变量

data() {
      return {
        visible: true
      };
    },

方法Methods

关闭,触发事件

methods: {
      close() {
        this.visible = false;
        this.$emit('close');
      }
    },

Events

事件名称	说明	回调参数
close	关闭alert时触发的事件	—

scss说明

@import "mixins/mixins";
@import "common/var";

@include b(alert) {
  width: 100%;
  padding: $--alert-padding;
  margin: 0;
  box-sizing: border-box;
  border-radius: $--alert-border-radius;
  position: relative;
  background-color: $--color-white;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity .2s;

  @include when(light) {
    .el-alert__closebtn {
      color: $--color-text-placeholder;
    }
  }

  @include when(dark) {
    .el-alert__closebtn {
      color: $--color-white;
    }
    .el-alert__description {
      color: $--color-white;
    }
  }

  @include when(center) {
    justify-content: center;
  }

  @include m(success) {
    &.is-light {
      background-color: $--alert-success-color;
      color: $--color-success;

      .el-alert__description {
        color: $--color-success;
      }
    }

    &.is-dark {
      background-color: $--color-success;
      color: $--color-white;
    }
  }

  @include m(info) {
    &.is-light {
      background-color: $--alert-info-color;
      color: $--color-info;
    }

    &.is-dark {
      background-color: $--color-info;
      color: $--color-white;
    }

    .el-alert__description {
      color: $--color-info;
    }
  }

  @include m(warning) {
    &.is-light {
      background-color: $--alert-warning-color;
      color: $--color-warning;

      .el-alert__description {
        color: $--color-warning;
      }
    }

    &.is-dark {
      background-color: $--color-warning;
      color: $--color-white;
    }
  }

  @include m(error) {
    &.is-light {
      background-color: $--alert-danger-color;
      color: $--color-danger;

      .el-alert__description {
        color: $--color-danger;
      }
    }

    &.is-dark {
      background-color: $--color-danger;
      color: $--color-white;
    }
  }

  @include e(content) {
    display: table-cell;
    padding: 0 8px;
  }

  @include e(icon) {
    font-size: $--alert-icon-size;
    width: $--alert-icon-size;
    @include when(big) {
      font-size: $--alert-icon-large-size;
      width: $--alert-icon-large-size;
    }
  }

  @include e(title) {
    font-size: $--alert-title-font-size;
    line-height: 18px;
    @include when(bold) {
      font-weight: bold;
    }
  }

  & .el-alert__description {
    font-size: $--alert-description-font-size;
    margin: 5px 0 0 0;
  }

  @include e(closebtn) {
    font-size: $--alert-close-font-size;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;

    @include when(customed) {
      font-style: normal;
      font-size: $--alert-close-customed-font-size;
      top: 9px;
    }
  }
}

.el-alert-fade-enter,
.el-alert-fade-leave-active {
  opacity: 0;
}