ElementUI 源码学习-Alert

ElementUI 源码学习-Alert

index.js

import Alert from './src/main';

/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};

export default Alert;

title,description

title: {
 type: String,
  default: ''
},

<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>
        
 isBoldTitle() {
  return this.description || this.$slots.default ? 'is-bold' : '';
 }

通过 isBoldTitle 计算属性来控制标题是不是加粗 this.description || this.$slots.default

vm.$slots
可以看这个解释 slots

type主题/success/warning/info/error
center

<div
   class="el-alert"
   :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
   v-show="visible"  //是否显示
   role="alert"
 >

type: {
   type: String,
   default: 'info'  //默认info
 }
 center: Boolean,
 
 computed: {
  typeClass() {
    return `el-alert--${ this.type }`;  // 根据传递的type返回不同的类
  }
}

根据传递的type返回不同的类，根据center控制文字位置

icon

	<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
	
	const TYPE_CLASSES_MAP = {
	  'success': 'el-icon-circle-check',
	  'warning': 'el-icon-warning',
	  'error': 'el-icon-circle-cross'
	};
 	showIcon: Boolean,
  
      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
      },

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

计算属性 isBigIcon 由props 中的description 和 slot 控制 当存在描述内容的时候就使用大的图标
iconClass
TYPE_CLASSES_MAP是一个常量对象，用来做map，根据传递的type来决定相应的类名

关闭按钮

  <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
   closable: {  //控制关闭按钮
        type: Boolean,
        default: true
      }
     methods: {
      close() {
        this.visible = false;
        this.$emit('close');
      }
    },

存在closeText这一prop的内容的话，会自定义关闭内容；
会根据closable这一prop决定是否显示该关闭按钮；
绑定单击时触发事件close()

effect
选择提供的主题

      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"

      effect: {
        type: String,
        default: 'light',
        validator: function(value) {   //vue props对象 (validator自定义函数)*
        // 这个值必须匹配下列字符串中的一个
          return ['light', 'dark'].indexOf(value) !== -1;
        }
      }

vue props对象 (validator自定义函数)
用于接收来自父组件的数据（子组件期待获得的数据)
类型：字符串数组或者object
effect传入的值必须匹配[‘light’, ‘dark’]中的一个