index.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { use } from '../utils';
  2. import Icon from '../icon';
  3. var _use = use('step'),
  4. sfc = _use[0],
  5. bem = _use[1];
  6. export default sfc({
  7. beforeCreate: function beforeCreate() {
  8. var steps = this.$parent.steps;
  9. var index = this.$parent.slots().indexOf(this.$vnode);
  10. steps.splice(index === -1 ? steps.length : index, 0, this);
  11. },
  12. beforeDestroy: function beforeDestroy() {
  13. var index = this.$parent.steps.indexOf(this);
  14. if (index > -1) {
  15. this.$parent.steps.splice(index, 1);
  16. }
  17. },
  18. computed: {
  19. status: function status() {
  20. var index = this.$parent.steps.indexOf(this);
  21. var active = this.$parent.active;
  22. if (index < active) {
  23. return 'finish';
  24. }
  25. if (index === active) {
  26. return 'process';
  27. }
  28. }
  29. },
  30. render: function render(h) {
  31. var _ref;
  32. var status = this.status;
  33. var _this$$parent = this.$parent,
  34. activeIcon = _this$$parent.activeIcon,
  35. activeColor = _this$$parent.activeColor,
  36. direction = _this$$parent.direction;
  37. var titleStyle = status === 'process' && {
  38. color: activeColor
  39. };
  40. return h("div", {
  41. "class": ['van-hairline', bem([direction, (_ref = {}, _ref[status] = status, _ref)])]
  42. }, [h("div", {
  43. "class": bem('title'),
  44. "style": titleStyle
  45. }, [this.slots()]), h("div", {
  46. "class": bem('circle-container')
  47. }, [status !== 'process' ? h("i", {
  48. "class": bem('circle')
  49. }) : this.slots('active-icon') || h(Icon, {
  50. "attrs": {
  51. "name": activeIcon
  52. },
  53. "style": {
  54. color: activeColor
  55. }
  56. })]), h("div", {
  57. "class": bem('line')
  58. })]);
  59. }
  60. });