drip-ui/es/steps/index.js

Lightweight Mobile UI Components built on Vue

import create from '../utils/create';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "steps"
    }, _vm._l(_vm.list, function (item, index) {
      return _c('div', {
        key: index,
        staticClass: "steps-step"
      }, [_c('div', {
        staticClass: "steps-step-head"
      }, [index < _vm.list.length - 1 ? _c('div', {
        staticClass: "steps-step-line",
        "class": [_vm.lineColor(item.status || 0)],
        staticStyle: {
          "width": "1px"
        }
      }) : _vm._e(), _c('div', {
        staticClass: "steps-step-icon",
        style: {
          backgroundImage: item.isLight ? "url('http://store.sdbao.com/insure/images/seleced.png')" : "url('http://store.sdbao.com/product/progress-out.png')"
        }
      })]), _c('div', {
        staticClass: "steps-step-main"
      }, [_c('div', {
        staticClass: "steps-step-title",
        "class": {
          'steps-step-title-now': item.isLight,
          'steps-step-orange': item.status
        },
        domProps: {
          "textContent": _vm._s(item.title)
        }
      }), _c('div', {
        staticClass: "steps-step-description",
        domProps: {
          "textContent": _vm._s(item.desc)
        }
      }), _c('div', {
        staticClass: "steps-step-tip",
        domProps: {
          "textContent": _vm._s(item.tip)
        }
      })])]);
    }));
  },
  name: 'steps',
  props: {
    list: {
      type: Array
    },
    orderType: {
      type: Number,
      "default": 0
    }
  },
  methods: {
    lineColor: function lineColor(status) {
      var onColor = this.orderType ? 'steps-top' : 'steps-bottom';

      switch (status) {
        case 0:
          // 改步骤未完成,默认灰色
          return 'steps-gray';
          break;

        case 1:
          // 该步骤正在进行
          return onColor;
          break;

        case 2:
          // 该步骤已完成
          return 'steps-orange';
          break;
      }
    }
  }
});