拜讀及分析Element原始碼-alert元件篇

hollyDysania發表於2018-09-10
原始碼元件

alert元件比較簡單，基本上就是展示不同的樣式， 只有一個關閉事件。(有問題歡迎指正與討論 也可以來小站逛逛)

拜讀及分析Element原始碼-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官方傳送門

相關文章