【分析element-ui源码】Alert 组件篇

【分析element-ui源码】Alert 组件篇

目录：

知识点:

1.slot:

(1).在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

(2).slot 插槽，默认的插槽 <slot></slot>如代码中description，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽如代码种的<slot name="title">{{ title }}</slot> (vue官网解析地址:cn.vuejs.org/v2/guide/co…)

<template>
  <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>
        <!-- 辅助性文字：1.可以通过默认slot的方式传入 2.通过属性的方式传入 -->
        <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>
</template>

<script>
  const TYPE_CLASSES_MAP = {
    'success': 'el-icon-success',
    'warning': 'el-icon-warning',
    'error': 'el-icon-error'
  };
  export default {
    name: 'ElAlert',
    props: {
      title: {  //标题
        type: String,
        default: ''
      },
      description: { //辅助性文字。也可通过默认 slot 传入
        type: String,
        default: ''
      },
      type: {  //主题
        type: String,
        default: 'info'
      },
      closable: {  //是否可关闭
        type: Boolean,
        default: true
      },
      closeText: {  //关闭按钮自定义文本
        type: String,
        default: ''
      },
      showIcon: Boolean,  //是否显示图标
      center: Boolean,  //	文字是否居中
      effect: {  // 选择提供的主题(light/dark)
        type: String,
        default: 'light',
        validator: function(value) {
          return ['light', 'dark'].indexOf(value) !== -1;
        }
      }
    },

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

    methods: {
      //关闭事件
      close() {
        this.visible = false;
        this.$emit('close');
      }
    },

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

      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
      },
      //如果有辅助性文字，图标变大加上 class:is-big
      isBigIcon() {
        return this.description || this.$slots.default ? 'is-big' : '';
      },
       //如果有辅助性文字，标题加粗 class:is-bold
      isBoldTitle() {
        return this.description || this.$slots.default ? 'is-bold' : '';
      }
    }
  };
</script>