inputNumber组件

<template>

    <!--@dragstart.prevent禁止input中数字的拖动-->

  <div

    @dragstart.prevent

    :class="[

      'el-input-number',

      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',

      { 'is-disabled': inputNumberDisabled },

      { 'is-without-controls': !controls },

      { 'is-controls-right': controlsAtRight }

    ]">

    <span

      class="el-input-number__decrease"

      role="button"

      v-if="controls"

      v-repeat-click="decrease"

      :class="{'is-disabled': minDisabled}"

      @keydown.enter="decrease">

      <i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`"></i>

    </span>

    <span

      class="el-input-number__increase"

      role="button"

      v-if="controls"

      v-repeat-click="increase"

      :class="{'is-disabled': maxDisabled}"

      @keydown.enter="increase">

      <i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`"></i>

    </span>

    <el-input

      ref="input"

      :value="currentInputValue"

      :placeholder="placeholder"

      :disabled="inputNumberDisabled"

      :size="inputNumberSize"

      :max="max"

      :min="min"

      :name="name"

      :label="label"

      @keydown.up.native.prevent="increase"

      @keydown.down.native.prevent="decrease"

      @blur="handleBlur"

      @focus="handleFocus"

      @change="handleInputChange">

    </el-input>

  </div>

</template>

<script>

  import ElInput from 'element-ui/packages/input';

  import Focus from 'element-ui/src/mixins/focus';

  //RepeatClick，用来控制左键按下时不断触发事件

  import RepeatClick from 'element-ui/src/directives/repeat-click';

  export default {

    name: 'ElInputNumber',

    mixins: [Focus('input')],

    inject: {

      elForm: {

        default: ''

      },

      elFormItem: {

        default: ''

      }

    },

    directives: {

      repeatClick: RepeatClick

    },

    components: {

      ElInput

    },

    props: {

      step: { //计数器步长

        type: Number,

        default: 1

      },

      max: { //设置计数器允许的最大值

        type: Number,

        default: Infinity

      },

      min: { //设置计数器允许的最小值

        type: Number,

        default: -Infinity

      },

      value: {}, //绑定值

      disabled: Boolean, //是否禁用计数器

      size: String, //计数器尺寸

      controls: { //是否使用控制按钮

        type: Boolean,

        default: true

      },

      controlsPosition: { //控制按钮位置

        type: String,

        default: ''

      },

      name: String, //原生属性

      label: String, //输入框关联的label文字

      placeholder: String, //输入框默认 placeholder

      precision: { //数值精度

        type: Number,

        validator(val) {

          return val >= 0 && val === parseInt(val, 10);

        }

      }

    },

    data() {

      return {

        currentValue: 0

      };

    },

    watch: {

      value: {

        //确认是否以当前的初始值执行handler的函数。

        immediate: true,

        handler(value) {

          //Number() 函数把对象的值转换为数字。

          let newVal = value === undefined ? value : Number(value);

          if (newVal !== undefined) {

            if (isNaN(newVal)) {

              return;

            }

            if (this.precision !== undefined) {

              //如果数值精度存在，将数字按精度转换

              newVal = this.toPrecision(newVal, this.precision);

            }

          }

          if (newVal >= this.max) newVal = this.max;

          if (newVal <= this.min) newVal = this.min;

          this.currentValue = newVal;

          this.$emit('input', newVal);

        }

      }

    },

    computed: {

      // 返回当前减号是否被禁用

      minDisabled() {

        // 当前值-计数器步长<最小值时，减号被禁用，不能再继续减

        return this._decrease(this.value, this.step) < this.min;

      },

      maxDisabled() {

        return this._increase(this.value, this.step) > this.max;

      },

      //返回数值的精度

      numPrecision() {

         // precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。

        const { value, step, getPrecision, precision } = this;

        const stepPrecision = getPrecision(step);

        if (precision !== undefined) {

          //如果step 的小数位数大于数值精度时，控制台输出警告并返回数值精度

          if (stepPrecision > precision) {

            console.warn('[Element Warn][InputNumber]precision should not be less than the decimal places of step');

          }

          return precision;

        } else {

            //如果step 的小数位数小于数值精度时，再比较数值的精度和step的精度，取最大值

          return Math.max(getPrecision(value), stepPrecision);

        }

      },

      // 控制按钮的位置

      controlsAtRight() {

        //  当控制按钮存在，并且控制按钮的位置为right时，此处通过添加is-controls-right类来改变控制按钮的位置，使控制按钮在右边显示。

        return this.controls && this.controlsPosition === 'right';

      },

      _elFormItemSize() {

        return (this.elFormItem || {}).elFormItemSize;

      },

      //计数器的大小

      inputNumberSize() {

        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;

      },

      // 是否禁用计数器

      inputNumberDisabled() {

        return this.disabled || (this.elForm || {}).disabled;

      },

      currentInputValue() {

        const currentValue = this.currentValue;

        if (typeof currentValue === 'number' && this.precision !== undefined) {

          return currentValue.toFixed(this.precision);

        } else {

          return currentValue;

        }

      }

    },

    methods: {

      //按精度转换数值

      toPrecision(num, precision) {

        if (precision === undefined) precision = this.numPrecision;

         //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字,返回字符串;parseFloat()函数可解析一个字符串，并返回一个浮点数。

        return parseFloat(parseFloat(Number(num).toFixed(precision)));

      },

      //获取value的小数位数

      getPrecision(value) {

        if (value === undefined) return 0;

        const valueString = value.toString();

        const dotPosition = valueString.indexOf('.');

        let precision = 0;

        if (dotPosition !== -1) {

          //valueString.length减去小数点前面的位数，剩下的就是小数点后面的位数

          precision = valueString.length - dotPosition - 1;

        }

        return precision;

      },

      _increase(val, step) {

        if (typeof val !== 'number' && val !== undefined) return this.currentValue;

        const precisionFactor = Math.pow(10, this.numPrecision);

        return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);

      },

      //返回value减去step后的值

      _decrease(val, step) {

        if (typeof val !== 'number' && val !== undefined) return this.currentValue;

        //Math.pow()计算10的this.numPrecision次方

        const precisionFactor = Math.pow(10, this.numPrecision);

        //这里主要是为了减少误差

        return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);

      },

      increase() {

        if (this.inputNumberDisabled || this.maxDisabled) return;

        const value = this.value || 0;

        const newVal = this._increase(value, this.step);

        this.setCurrentValue(newVal);

      },

       //点击减号时触发的事件

      decrease() {

        if (this.inputNumberDisabled || this.minDisabled) return;

        const value = this.value || 0;

        const newVal = this._decrease(value, this.step);

        this.setCurrentValue(newVal);

      },

      handleBlur(event) {

        this.$emit('blur', event);

        this.$refs.input.setCurrentValue(this.currentInputValue);

      },

      handleFocus(event) {

        this.$emit('focus', event);

      },

      setCurrentValue(newVal) {

        const oldVal = this.currentValue;

        if (typeof newVal === 'number' && this.precision !== undefined) {

          newVal = this.toPrecision(newVal, this.precision);

        }

        if (newVal >= this.max) newVal = this.max;

        if (newVal <= this.min) newVal = this.min;

        if (oldVal === newVal) {

          //改变input的当前值

          this.$refs.input.setCurrentValue(this.currentInputValue);

          return;

        }

        this.$emit('input', newVal);

        this.$emit('change', newVal, oldVal);

        this.currentValue = newVal;

      },

      handleInputChange(value) {

        const newVal = value === '' ? undefined : Number(value);

        if (!isNaN(newVal) || value === '') {

          this.setCurrentValue(newVal);

        }

      },

      select() {

        this.$refs.input.select();

      }

    },

    mounted() {

      let innerInput = this.$refs.input.$refs.input;

      innerInput.setAttribute('role', 'spinbutton');

      innerInput.setAttribute('aria-valuemax', this.max);

      innerInput.setAttribute('aria-valuemin', this.min);

      innerInput.setAttribute('aria-valuenow', this.currentValue);

      innerInput.setAttribute('aria-disabled', this.inputNumberDisabled);

    },

    updated() {

      if (!this.$refs || !this.$refs.input) return;

      const innerInput = this.$refs.input.$refs.input;

      innerInput.setAttribute('aria-valuenow', this.currentValue);

    }

  };

</script>

解析：

（1）先看下html结构

 <div class="el-input-number">

        <!--左边的减号-->

       <span class="el-input-number__decrease">

           <i class="el-icon-minus"></i>

       </span>

        <!--右边的加号-->

       <span class="el-input-number__increase">

          <i class="el-icon-plus"></i>

       </span>

        <!--中间的输入框-->

       <el-input ref="input"></el-input>

</div>

左边的减号和右边的加号是通过绝对定位，设置在input左右的padding位置的，input的css代码如下：

.el-input-number .el-input__inner {

    -webkit-appearance: none;

    padding-left: 50px;

    padding-right: 50px;

    text-align: center;

}

这个inputNumber源码还算简单，多看几遍就懂了

Card 组件

<template>

  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">

      <!--头部：设置 header，也可以通过 slot#header 传入 DOM-->

    <div class="el-card__header" v-if="$slots.header || header">

      <slot name="header">{{ header }}</slot>

    </div>

      <!--内容部分-->

    <div class="el-card__body" :style="bodyStyle">

      <slot></slot>

    </div>

  </div>

</template>

<script>

  export default {

    name: 'ElCard',

    props: {

      header: {}, //设置 header，也可以通过 slot#header 传入DOM

      bodyStyle: {}, //设置 body 的样式

      shadow: {  //设置阴影显示时机

        type: String

      }

    }

  };

</script>

Breadcrumb组件

<template>

  <span class="el-breadcrumb__item">

    <span

      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"

      ref="link"

      role="link">

      <!--插入文字-->

      <slot></slot>

    </span>

      <!--图标分隔符-->

    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>

      <!--分隔符-->

    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>

  </span>

</template>

<script>

  export default {

    name: 'ElBreadcrumbItem',

    props: {

      to: {}, //路由跳转对象，同 vue-router 的 to

      replace: Boolean //在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录

    },

    data() {

      return {

        separator: '',

        separatorClass: ''

      };

    },

    inject: ['elBreadcrumb'],

    mounted() {

      //获取父组件的separator

      this.separator = this.elBreadcrumb.separator;

      //获取父组件的separatorClass

      this.separatorClass = this.elBreadcrumb.separatorClass;

      const link = this.$refs.link;

      link.setAttribute('role', 'link');

      //添加点击事件

      link.addEventListener('click', _ => {

        const { to, $router } = this;

        if (!to || !$router) return;

        //根据replace的值确定是replace还是push，replace 将不会向 history 添加新记录

        this.replace ? $router.replace(to) : $router.push(to);

      });

    }

  };

</script>