element-ui Progress、Badge、Alert組件源碼分析整理筆記（四）

Progress進度條組件

<template>
    <!--最外層-->
  <div
    class="el-progress"
    :class="[
      'el-progress--' + type,
      status ? 'is-' + status : '',
      {
        'el-progress--without-text': !showText,
        'el-progress--text-inside': textInside,
      }
    ]"
    role="progressbar"
    :aria-valuenow="percentage"
    aria-valuemin="0"
    aria-valuemax="100"
  >
      <!--線形進度條-->
    <div class="el-progress-bar" v-if="type === 'line'">
      <!--進度條外部背景；strokeWidth:文檔中說是寬度，這裏是高度呀-->
      <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
        <!--進度條內部百分比-->
        <div class="el-progress-bar__inner" :style="barStyle">
            <!--線形進度條內部文字-->
          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
        </div>
      </div>
    </div>
      <!--環形進度條-->
    <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
      <svg viewBox="0 0 100 100">
        <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
      </svg>
    </div>
      <!--進度條外面文字內容-->
    <div class="el-progress__text" v-if="showText && !textInside" :style="{fontSize: progressTextSize + 'px'}">
        <!--進度條當前狀態status值不存在時，顯示百分比-->
      <template v-if="!status">{{percentage}}%</template>
        <!--進度條當前狀態status值存在時-->
      <template v-else>
          <!--status爲text，將文本內容插入顯示-->
        <slot v-if="status === 'text'"></slot>
          <!--status爲其餘值時，顯示對應的圖標-->
        <i v-else :class="iconClass"></i>
      </template>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ElProgress',
    props: {
      type: { //進度條類型
        type: String,
        default: 'line',
        validator: val => ['line', 'circle'].indexOf(val) > -1
      },
      percentage: { //百分比（必填）
        type: Number,
        default: 0,
        required: true,
        validator: val => val >= 0 && val <= 100
      },
      status: { //進度條當前狀態
        type: String,
        validator: val => ['text', 'success', 'exception'].indexOf(val) > -1
      },
      strokeWidth: { //進度條的寬度，單位 px
        type: Number,
        default: 6
      },
      textInside: { //進度條顯示文字內置在進度條內（只在 type=line 時可用）
        type: Boolean,
        default: false
      },
      width: { //環形進度條畫布寬度（只在 type=circle 時可用）
        type: Number,
        default: 126
      },
      showText: { //是否顯示進度條文字內容
        type: Boolean,
        default: true
      },
      color: { //進度條背景色（會覆蓋 status 狀態顏色）
        type: String,
        default: ''
      }
    },
    computed: {
      //進度條內部百分比和背景顏色顯示
      barStyle() {
        const style = {};
        style.width = this.percentage + '%';
        style.backgroundColor = this.color;
        return style;
      },
      relativeStrokeWidth() {
        return (this.strokeWidth / this.width * 100).toFixed(1);
      },
      trackPath() {
        const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);

        return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
      },
      perimeter() {
        const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
        return 2 * Math.PI * radius;
      },
      circlePathStyle() {
        const perimeter = this.perimeter;
        return {
          strokeDasharray: `${perimeter}px,${perimeter}px`,
          strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
        };
      },
      stroke() {
        let ret;
        if (this.color) {
          ret = this.color;
        } else {
          switch (this.status) {
            case 'success':
              ret = '#13ce66';
              break;
            case 'exception':
              ret = '#ff4949';
              break;
            default:
              ret = '#20a0ff';
          }
        }
        return ret;
      },
      iconClass() {
        if (this.type === 'line') {
          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
        } else {
          return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
        }
      },
      //  進度條外文字的大小
      progressTextSize() {
        return this.type === 'line'
          ? 12 + this.strokeWidth * 0.4
          : this.width * 0.111111 + 2 ;
      }
    }
  };
</script>

Badge標記組件

<template>
  <div class="el-badge">
    <slot></slot>
    <transition name="el-zoom-in-center">
        <!--is-fixed類用來定位上面數字的顯示-->
      <sup
        v-show="!hidden && (content || content === 0 || isDot)"
        v-text="content"
        class="el-badge__content"
        :class="[
          'el-badge__content--' + type,
          {
            'is-fixed': $slots.default,
            'is-dot': isDot
          }
        ]">
      </sup>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'ElBadge',

  props: {
    value: {}, //顯示值
    max: Number, //最大值，超過最大值會顯示 '{max}+'，要求 value 是 Number 類型
    isDot: Boolean, //小圓點
    hidden: Boolean, //隱藏 badge
    type: { //類型
      type: String,
      validator(val) {
        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
      }
    }
  },

  computed: {
    // 返回顯示的數據
    content() {
      //  若是是顯示小圓點，直接返回
      if (this.isDot) return;
      const value = this.value;
      const max = this.max;
      if (typeof value === 'number' && typeof max === 'number') {
        // 若是顯示值比最大值則顯示'{max}+'
        return max < value ? `${max}+` : value;
      }
      return value;
    }
  }
};
</script>

Alert 警告組件

<template>
  <transition name="el-alert-fade">
      <!--最外層包裹標籤-->
    <div
      class="el-alert"
      :class="[typeClass, center ? 'is-center' : '']"
      v-show="visible"
      role="alert"
    >
      <!--經過設置show-icon屬性來顯示 Alert 的 icon，這能更有效地向用戶展現你的顯示意圖-->
      <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 || $slots.title">
          <slot name="title">{{ title }}</slot>
        </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>
</template>

<script type="text/babel">
  const TYPE_CLASSES_MAP = {
    'success': 'el-icon-success',
    'warning': 'el-icon-warning',
    'error': 'el-icon-error'
  };
  export default {
    name: 'ElAlert',

    props: {
      title: { //標題
        type: String,
        default: ''
      },
      description: { //輔助性文字，也可經過默認 slot 傳入
        type: String,
        default: ''
      },
      type: { //主題
        type: String,
        default: 'info'
      },
      closable: {  //是否可關閉
        type: Boolean,
        default: true
      },
      closeText: { //關閉按鈕自定義文本
        type: String,
        default: ''
      },
      showIcon: Boolean, //是否顯示圖標
      center: Boolean  //文字是否居中
    },

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

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

    computed: {
      // 根據type返回對應的類，主要用來顯示alert組件背景色和文字的顏色
      typeClass() {
        return `el-alert--${ this.type }`;
      },
      // 根據type返回顯示的圖標
      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
      },
      // 若是description存在顯示大圖標
      isBigIcon() {
        return this.description || this.$slots.default ? 'is-big' : '';
      },
      // 若是description存在，title加粗顯示
      isBoldTitle() {
        return this.description || this.$slots.default ? 'is-bold' : '';
      }
    }
  };
</script>