拜读及分析Element源码-alert组件篇

alert组件比较简单，基本上就是展示不同的样式， 只有一个关闭事件。(有问题欢迎指正与讨论 也可以来小站逛逛)

结构

  <transition name="el-alert-fade">
    <!-- 
      typeClass：根据传入的type控制样式
      center: 根据传入的center控制内容是否居中
      role：属性作用是告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。 
     -->
    <div
      class="el-alert"
      :class="[typeClass, center ? 'is-center' : '']"
      v-show="visible"
      role="alert"
    >
      <!-- 
        showIcon: 控制是否显示icon
        iconClass: 根据传入的type动态控制icon的样式
        isBigIcon： 如果传入了description（辅助性文字）或者 插槽内传入了内容 则显示大icon
       -->
      <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
      <div class="el-alert__content">
        <!-- 如果传入了description（辅助性文字）或者 传入了匿名插槽 则显示加粗title -->
        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
        <!-- 传入插槽内容则显示插槽内容 未传入默认显示slot内的内容description -->
        <slot>
          <p class="el-alert__description" v-if="description">{{ description }}</p>
        </slot>
        <!-- 
          closable: 是否显示关闭按钮，默认显示
          closeText： 关闭按钮自定义文字，无显示X有显示文字
         -->
        <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
    }
  }
复制代码

学习

• 动态class class绑定传送门
  • 数组写法
  • 对象写法
  • 更复杂的情况可以用数组组合对象的写法
• role属性：无障碍网页应用,读屏软件会用到。W3c传送门
• $slots.default ： 获取所有匿名插槽分发的内容 $slots官方传送门