Alert组件相对比较简单，简单贴上代码添加几行注释。

 1 const TYPE_CLASSES_MAP = {    //常见的代码优化手段，减少switch语句使用
 2                 'success': 'el-icon-circle-check',
 3                 'warning': 'el-icon-warning',
 4                 'error': 'el-icon-circle-cross'
 5             };
 6             export default {
 7                 name: 'ElAlert',
 8
 9                 props: {
10                     title: {
11                         type: String,
12                         default: '',
13                         required: true
14                     },
15                     description: {
16                         type: String,
17                         default: ''
18                     },
19                     type: {
20                         type: String,
21                         default: 'info'
22                     },
23                     closable: {
24                         type: Boolean,
25                         default: true
26                     },
27                     closeText: {
28                         type: String,
29                         default: ''
30                     },
31                     showIcon: {
32                         type: Boolean,
33                         default: false
34                     }
35                 },
36
37                 data() {
38                     return {
39                         visible: true
40                     };
41                 },
42
43                 methods: {
44                     close() {
45                         this.visible = false;
46                         this.$emit('close');
47                     }
48                 },
49
50                 computed: {
51                     typeClass() {
52                         return `el-alert--${ this.type }`;
53                     },
54
55                     iconClass() {
56                         return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
57                     },
58      //开发和设计中经常忽略的点：图标与容器宽高的适配
59                     isBigIcon() {
60                         return this.description ? 'is-big' : '';
61                     },
62
63                     isBoldTitle() {
64                         return this.description ? 'is-bold' : '';
65                     }
66                 }
67             };

----天下熙熙皆为利来，天下攘攘皆为利往