I. Component introduction

The Alert component is used to display important Alert information on the page. It is a non-floating element in the page and does not disappear automatically. Detail can see: [website links] (component | Element (gitee. IO))

1.1 attributes

  • Title: title, you can also customize the title through the title slot;
  • Type: type, there is success/warning/info/error four types, the default is the info;
  • Description: Provides supplementary description information. You can also customize the information through the default slot.
  • Closable: Indicates whether to display the off button
  • Close-text: close button user-defined text
  • Show-icon: indicates whether to display an icon
  • Center: Indicates whether the text is centered
  • Effect: theme. There are two types: light/dark, ligth by default

1.2 event

  • Close: Triggered when the alert is disabled

Second, source code analysis

2.1 the template

<template>// VUE official transition component, provides transition effects<transition name="el-alert-fade">// v-show controls display hiding<div
      v-show="visible"
      class="el-alert"
      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
      role="alert"
    >
      <i v-if="showIcon" class="el-alert__icon" :class="[ iconClass, isBigIcon ]"></i>
      <div class="el-alert__content">// The title section provides a named slot<span v-if="title || $slots.title" class="el-alert__title" :class="[ isBoldTitle ]">
          <slot name="title">{{ title }}</slot>
        </span>// The description section provides the default slot<p v-if="$slots.default || !! description" class="el-alert__description">
          <slot>
            {{ description }}
          </slot>
        </p>// Close the button or text<i
          v-if="closable"
          class="el-alert__closebtn"
          :class="{ 'is-customed': closeText ! == '', 'el-icon-close': closeText === '' }"
          @click="close"
        >
          {{ closeText }}
        </i>
      </div>
    </div>
  </transition>
</template>
Copy the code

2.2 the script

// Some core source code
setup(props, ctx) {
    // state
    const visible = ref(true)
    
    // Calculate attributes and control styles
    // computed
    const typeClass = computed(() = > `el-alert--${ props.type }`)
    const iconClass = computed(() = > TYPE_CLASSES_MAP[props.type] || 'el-icon-info')
    const isBigIcon = computed(() = > props.description || ctx.slots.default ? 'is-big' : ' ')
    const isBoldTitle = computed(() = > props.description || ctx.slots.default ? 'is-bold' : ' ')

    // methods
    const close = evt= > {
      visible.value = false
      ctx.emit('close', evt)
    }

    return {
      visible,
      typeClass,
      iconClass,
      isBigIcon,
      isBoldTitle,
      close,
    }
  }
Copy the code