Element 소스 -alert 어셈블리 편 읽기 및 분석

구조

  <transition name="el-alert-fade">
    
    <div
      class="el-alert"
      :class="[typeClass, center ? 'is-center' : '']"
      v-show="visible"
      role="alert"
    >
      
      <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>

props

  props: {
    //     
    title: {
      type: String,
      default: '',
      required: true
    },
    //      
    description: {
      type: String,
      default: ''
    },
    //      computed      type       
    type: {
      type: String,
      default: 'info'
    },
    //       
    closable: {
      type: Boolean,
      default: true
    },
    //          
    closeText: {
      type: String,
      default: ''
    },
    //     icom
    showIcon: Boolean,
    //       
    center: Boolean
  }

computed

  computed: {
    // alert   
    typeClass() {
      return `el-alert--${this.type}`
    },
    // alert icon   
    iconClass() {
      return TYPE_CLASSES_MAP[this.type] || 'el-icon-info'
    },
    //      description（     ）               icon
    isBigIcon() {
      return this.description || this.$slots.default ? 'is-big' : ''
    },
    //      description（     ）                title
    isBoldTitle() {
      return this.description || this.$slots.default ? 'is-bold' : ''
    }
  }

methods

  methods: {
    //   alert  
    close() {
      // v-show  alert
      this.visible = false
      //       close  
      this.$emit('close')
    }
  }

data

  data() {
    return {
      //       
      visible: true
    }
  }

배우다