index.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../utils");
  6. var _constant = require("../utils/constant");
  7. var _relation = require("../mixins/relation");
  8. var _icon = _interopRequireDefault(require("../icon"));
  9. var _createNamespace = (0, _utils.createNamespace)('step'),
  10. createComponent = _createNamespace[0],
  11. bem = _createNamespace[1];
  12. var _default = createComponent({
  13. mixins: [(0, _relation.ChildrenMixin)('vanSteps')],
  14. computed: {
  15. status: function status() {
  16. if (this.index < this.parent.active) {
  17. return 'finish';
  18. }
  19. if (this.index === +this.parent.active) {
  20. return 'process';
  21. }
  22. },
  23. active: function active() {
  24. return this.status === 'process';
  25. },
  26. lineStyle: function lineStyle() {
  27. var _this$parent = this.parent,
  28. activeColor = _this$parent.activeColor,
  29. inactiveColor = _this$parent.inactiveColor,
  30. center = _this$parent.center,
  31. direction = _this$parent.direction;
  32. var style = {
  33. background: this.status === 'finish' ? activeColor : inactiveColor
  34. };
  35. if (center && direction === 'vertical') {
  36. style.top = '50%';
  37. }
  38. return style;
  39. },
  40. circleContainerStyle: function circleContainerStyle() {
  41. if (this.parent.center && this.parent.direction === 'vertical') {
  42. return {
  43. top: '50%'
  44. };
  45. }
  46. },
  47. titleStyle: function titleStyle() {
  48. if (this.active) {
  49. return {
  50. color: this.parent.activeColor
  51. };
  52. }
  53. if (!this.status) {
  54. return {
  55. color: this.parent.inactiveColor
  56. };
  57. }
  58. }
  59. },
  60. methods: {
  61. genCircle: function genCircle() {
  62. var h = this.$createElement;
  63. var _this$parent2 = this.parent,
  64. activeIcon = _this$parent2.activeIcon,
  65. iconPrefix = _this$parent2.iconPrefix,
  66. activeColor = _this$parent2.activeColor,
  67. finishIcon = _this$parent2.finishIcon,
  68. inactiveIcon = _this$parent2.inactiveIcon;
  69. if (this.active) {
  70. return this.slots('active-icon') || h(_icon.default, {
  71. "class": bem('icon', 'active'),
  72. "attrs": {
  73. "name": activeIcon,
  74. "color": activeColor,
  75. "classPrefix": iconPrefix
  76. }
  77. });
  78. }
  79. var finishIconSlot = this.slots('finish-icon');
  80. if (this.status === 'finish' && (finishIcon || finishIconSlot)) {
  81. return finishIconSlot || h(_icon.default, {
  82. "class": bem('icon', 'finish'),
  83. "attrs": {
  84. "name": finishIcon,
  85. "color": activeColor,
  86. "classPrefix": iconPrefix
  87. }
  88. });
  89. }
  90. var inactiveIconSlot = this.slots('inactive-icon');
  91. if (inactiveIcon || inactiveIconSlot) {
  92. return inactiveIconSlot || h(_icon.default, {
  93. "class": bem('icon'),
  94. "attrs": {
  95. "name": inactiveIcon,
  96. "classPrefix": iconPrefix
  97. }
  98. });
  99. }
  100. return h("i", {
  101. "class": bem('circle'),
  102. "style": this.lineStyle
  103. });
  104. },
  105. onClickStep: function onClickStep() {
  106. this.parent.$emit('click-step', this.index);
  107. }
  108. },
  109. render: function render() {
  110. var _ref;
  111. var h = arguments[0];
  112. var status = this.status,
  113. active = this.active;
  114. var direction = this.parent.direction;
  115. return h("div", {
  116. "class": [_constant.BORDER, bem([direction, (_ref = {}, _ref[status] = status, _ref)])]
  117. }, [h("div", {
  118. "class": bem('title', {
  119. active: active
  120. }),
  121. "style": this.titleStyle,
  122. "on": {
  123. "click": this.onClickStep
  124. }
  125. }, [this.slots()]), h("div", {
  126. "class": bem('circle-container'),
  127. "on": {
  128. "click": this.onClickStep
  129. },
  130. "style": this.circleContainerStyle
  131. }, [this.genCircle()]), h("div", {
  132. "class": bem('line'),
  133. "style": this.lineStyle
  134. })]);
  135. }
  136. });
  137. exports.default = _default;