index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  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. if (this.status === 'finish') {
  28. return {
  29. background: this.parent.activeColor
  30. };
  31. }
  32. return {
  33. background: this.parent.inactiveColor
  34. };
  35. },
  36. titleStyle: function titleStyle() {
  37. if (this.active) {
  38. return {
  39. color: this.parent.activeColor
  40. };
  41. }
  42. if (!this.status) {
  43. return {
  44. color: this.parent.inactiveColor
  45. };
  46. }
  47. }
  48. },
  49. methods: {
  50. genCircle: function genCircle() {
  51. var h = this.$createElement;
  52. var _this$parent = this.parent,
  53. activeIcon = _this$parent.activeIcon,
  54. activeColor = _this$parent.activeColor,
  55. finishIcon = _this$parent.finishIcon,
  56. inactiveIcon = _this$parent.inactiveIcon;
  57. if (this.active) {
  58. return this.slots('active-icon') || h(_icon.default, {
  59. "class": bem('icon', 'active'),
  60. "attrs": {
  61. "name": activeIcon,
  62. "color": activeColor
  63. }
  64. });
  65. }
  66. var finishIconSlot = this.slots('finish-icon');
  67. if (this.status === 'finish' && (finishIcon || finishIconSlot)) {
  68. return finishIconSlot || h(_icon.default, {
  69. "class": bem('icon', 'finish'),
  70. "attrs": {
  71. "name": finishIcon,
  72. "color": activeColor
  73. }
  74. });
  75. }
  76. var inactiveIconSlot = this.slots('inactive-icon');
  77. if (inactiveIcon || inactiveIconSlot) {
  78. return inactiveIconSlot || h(_icon.default, {
  79. "class": bem('icon'),
  80. "attrs": {
  81. "name": inactiveIcon
  82. }
  83. });
  84. }
  85. return h("i", {
  86. "class": bem('circle'),
  87. "style": this.lineStyle
  88. });
  89. },
  90. onClickStep: function onClickStep() {
  91. this.parent.$emit('click-step', this.index);
  92. }
  93. },
  94. render: function render() {
  95. var _ref;
  96. var h = arguments[0];
  97. var status = this.status,
  98. active = this.active;
  99. var direction = this.parent.direction;
  100. return h("div", {
  101. "class": [_constant.BORDER, bem([direction, (_ref = {}, _ref[status] = status, _ref)])]
  102. }, [h("div", {
  103. "class": bem('title', {
  104. active: active
  105. }),
  106. "style": this.titleStyle,
  107. "on": {
  108. "click": this.onClickStep
  109. }
  110. }, [this.slots()]), h("div", {
  111. "class": bem('circle-container'),
  112. "on": {
  113. "click": this.onClickStep
  114. }
  115. }, [this.genCircle()]), h("div", {
  116. "class": bem('line'),
  117. "style": this.lineStyle
  118. })]);
  119. }
  120. });
  121. exports.default = _default;