Alert 组件的源码解读，直击内部原理！

2023-09-03 07:37:19

前言

Element UI 组件库中，Alert 组件用于警告提示，展现需要关注的信息。本文将深入分析其源码，剖析其实现原理，希望对您有所帮助。

源码分析

Alert 组件的源码位于 element-ui/packages/alert/src/alert.vue 文件中。我们首先来看一下它的模板部分：

<div class="el-alert" :class="[
    'el-alert--' + type,
    'el-alert--' + effect,
    'el-alert--close',
    showIcon ? 'el-alert--with-icon' : ''
  ]">
  <div class="el-alert__content">
    <i class="el-alert__icon" :class="[
      'el-icon-' + iconClass,
      iconClass
    ]"></i>
    <div class="el-alert__title" v-if="title">{{ title }}</div>
    <div class="el-alert__description" v-if="description">{{ description }}</div>
    <slot></slot>
  </div>
  <i class="el-alert__closebtn" @click="close" v-if="closable"></i>
</div>

从模板可以看出，Alert 组件主要由以下几个部分组成：

外部容器 .el-alert：包含了组件的所有内容。
内容区域 .el-alert__content：包含了图标、标题、和插槽。
图标 .el-alert__icon：显示在组件左上角，可以自定义。
标题 .el-alert__title：显示在图标下方，可以自定义。
.el-alert__description：显示在标题下方，可以自定义。
插槽：可以插入任意内容。
关闭按钮 .el-alert__closebtn：点击后关闭组件，只有在 closable 属性为 true 时才会显示。

接下来，我们来看一下组件的逻辑部分：

export default {
  name: 'ElAlert',

  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info'
    },
    effect: {
      type: String,
      default: 'light'
    },
    closable: {
      type: Boolean,
      default: true
    },
    showIcon: {
      type: Boolean,
      default: false
    },
    center: {
      type: Boolean,
      default: false
    }
  },

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

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