index.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import { createNamespace } from '../utils';
  2. import { BORDER } from '../utils/constant';
  3. import { ChildrenMixin } from '../mixins/relation';
  4. import Icon from '../icon';
  5. var _createNamespace = createNamespace('step'),
  6. createComponent = _createNamespace[0],
  7. bem = _createNamespace[1];
  8. export default createComponent({
  9. mixins: [ChildrenMixin('vanSteps')],
  10. computed: {
  11. status: function status() {
  12. if (this.index < this.parent.active) {
  13. return 'finish';
  14. }
  15. if (this.index === +this.parent.active) {
  16. return 'process';
  17. }
  18. },
  19. active: function active() {
  20. return this.status === 'process';
  21. },
  22. lineStyle: function lineStyle() {
  23. if (this.status === 'finish') {
  24. return {
  25. background: this.parent.activeColor
  26. };
  27. }
  28. return {
  29. background: this.parent.inactiveColor
  30. };
  31. },
  32. titleStyle: function titleStyle() {
  33. if (this.active) {
  34. return {
  35. color: this.parent.activeColor
  36. };
  37. }
  38. if (!this.status) {
  39. return {
  40. color: this.parent.inactiveColor
  41. };
  42. }
  43. }
  44. },
  45. methods: {
  46. genCircle: function genCircle() {
  47. var h = this.$createElement;
  48. var _this$parent = this.parent,
  49. activeIcon = _this$parent.activeIcon,
  50. activeColor = _this$parent.activeColor,
  51. finishIcon = _this$parent.finishIcon,
  52. inactiveIcon = _this$parent.inactiveIcon;
  53. if (this.active) {
  54. return this.slots('active-icon') || h(Icon, {
  55. "class": bem('icon', 'active'),
  56. "attrs": {
  57. "name": activeIcon,
  58. "color": activeColor
  59. }
  60. });
  61. }
  62. var finishIconSlot = this.slots('finish-icon');
  63. if (this.status === 'finish' && (finishIcon || finishIconSlot)) {
  64. return finishIconSlot || h(Icon, {
  65. "class": bem('icon', 'finish'),
  66. "attrs": {
  67. "name": finishIcon,
  68. "color": activeColor
  69. }
  70. });
  71. }
  72. var inactiveIconSlot = this.slots('inactive-icon');
  73. if (inactiveIcon || inactiveIconSlot) {
  74. return inactiveIconSlot || h(Icon, {
  75. "class": bem('icon'),
  76. "attrs": {
  77. "name": inactiveIcon
  78. }
  79. });
  80. }
  81. return h("i", {
  82. "class": bem('circle'),
  83. "style": this.lineStyle
  84. });
  85. },
  86. onClickStep: function onClickStep() {
  87. this.parent.$emit('click-step', this.index);
  88. }
  89. },
  90. render: function render() {
  91. var _ref;
  92. var h = arguments[0];
  93. var status = this.status,
  94. active = this.active;
  95. var direction = this.parent.direction;
  96. return h("div", {
  97. "class": [BORDER, bem([direction, (_ref = {}, _ref[status] = status, _ref)])]
  98. }, [h("div", {
  99. "class": bem('title', {
  100. active: active
  101. }),
  102. "style": this.titleStyle,
  103. "on": {
  104. "click": this.onClickStep
  105. }
  106. }, [this.slots()]), h("div", {
  107. "class": bem('circle-container'),
  108. "on": {
  109. "click": this.onClickStep
  110. }
  111. }, [this.genCircle()]), h("div", {
  112. "class": bem('line'),
  113. "style": this.lineStyle
  114. })]);
  115. }
  116. });