index.js
常規(guī)做法沟启，添加install方法來方便作為插件使用忆家。
import Alert from './src/main';
Alert.install = function(Vue) {
Vue.component(Alert.name, Alert);
};
export default Alert;
整體
首先分析一下其模板結(jié)構(gòu)德迹。
<template>
<transition name="el-alert-fade">
<div class="el-alert" :class="[ typeClass ]" v-show="visible">
<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>
</template>
最外層transition
首先，最外層是一個名為el-alert-fade的過渡動畫胳搞，查詢發(fā)現(xiàn)，它只是簡單的改變了透明度肌毅。
<transition name="el-alert-fade">
</transition>
.el-alert-fade-enter,
.el-alert-fade-leave-active {
opacity: 0;
}````
## el-alert包裹
然后，里面是一層`el-alert 類`的`div`用來包裹整個組件悬而，其中一個屬性是根據(jù)傳遞`props`的`type`類型改變樣式呜舒，另一個是根據(jù)`visible`決定是否顯示笨奠。
```html
<div class="el-alert" :class="[ typeClass ]" v-show="visible">
</div>
type是一個計算屬性，代碼如下：
props: {
type: {
type: String,
default: 'info'
}
}
computed: {
typeClass() {
return `el-alert--${ this.type }`; // 根據(jù)傳遞的type返回不同的類
}
}
再往里面般婆，是一個i標(biāo)簽和一個div標(biāo)簽到腥，前者是相應(yīng)的圖標(biāo)腺兴，后者是警告具體的內(nèi)容。
圖標(biāo)
圖標(biāo)通過兩個類控制樣式页响，它們都是計算屬性，其中iconClass決定圖標(biāo)類型闰蚕，isBigIcon決定圖標(biāo)大小栈拖，而showIcon是傳遞來的props決定是否顯示這個圖標(biāo)没陡。其代碼如下：
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
props: {
showIcon: {
type: Boolean,
default: false
}
}
computed: {
iconClass() {
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
},
isBigIcon() {
return this.description ? 'is-big' : '';
}
}
其中TYPE_CLASSES_MAP是一個常量對象，用來做map盼玄，根據(jù)傳遞的type來決定相應(yīng)的類名。
const TYPE_CLASSES_MAP = {
'success': 'el-icon-circle-check',
'warning': 'el-icon-warning',
'error': 'el-icon-circle-cross'
};
而isBigIcon是根據(jù)props中的description來決定的埃儿，當(dāng)存在描述內(nèi)容的時候就使用大的圖標(biāo)器仗。
props: {
description: {
type: String,
default: ''
},
}
主體內(nèi)容
接下來是主要的內(nèi)容部分，包括標(biāo)題威鹿、內(nèi)容和關(guān)閉按鈕三個部分。
標(biāo)題
標(biāo)題是由名為title的prop來決定的轨香，包含一個isBoldTitle的計算屬性來決定是否粗體，以及根據(jù)title是否存在來決定是否顯示這一部分臂容。
<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
computed: {
isBoldTitle() {
return this.description ? 'is-bold' : '';
}
}
警告描述
然后是最為主要的描述部分，這部分是一個slot脓杉，這使得炸渡，這一部分可以自定義丽已，也可以通過傳遞description這一prop來決定內(nèi)容买决。
<slot>
<p class="el-alert__description" v-if="description">{{ description }}</p>
</slot>
關(guān)閉按鈕
最后是關(guān)閉按鈕的實現(xiàn)。
<i
class="el-alert__closebtn"
:class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }"
v-show="closable"
@click="close()">
{{closeText}}
</i>
不難看出督赤，做了如下處理：
- 存在
closeText這一prop的內(nèi)容的話嘁灯，會自定義關(guān)閉內(nèi)容躲舌； - 會根據(jù)
closable這一prop決定是否顯示該關(guān)閉按鈕； - 綁定單擊時觸發(fā)事件
close()
其中closeText和closable的代碼如下：
props: {
closable: {
type: Boolean,
default: true
},
closeText: {
type: String,
default: ''
},
}
close會將visible設(shè)置為false從而關(guān)閉該警告没卸，并且觸發(fā)close事件。
methods: {
close() {
this.visible = false;
this.$emit('close');
}
},
