Steps.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import { createVNode as _createVNode } from "vue";
  4. import { computed, defineComponent } from 'vue';
  5. import { progressProps } from './props';
  6. export var stepsProps = function stepsProps() {
  7. return _objectSpread(_objectSpread({}, progressProps()), {}, {
  8. steps: Number,
  9. size: {
  10. type: String
  11. },
  12. strokeColor: String,
  13. trailColor: String
  14. });
  15. };
  16. export default defineComponent({
  17. compatConfig: {
  18. MODE: 3
  19. },
  20. name: 'Steps',
  21. props: stepsProps(),
  22. setup: function setup(props, _ref) {
  23. var slots = _ref.slots;
  24. var current = computed(function () {
  25. return Math.round(props.steps * ((props.percent || 0) / 100));
  26. });
  27. var stepWidth = computed(function () {
  28. return props.size === 'small' ? 2 : 14;
  29. });
  30. var styledSteps = computed(function () {
  31. var steps = props.steps,
  32. _props$strokeWidth = props.strokeWidth,
  33. strokeWidth = _props$strokeWidth === void 0 ? 8 : _props$strokeWidth,
  34. strokeColor = props.strokeColor,
  35. trailColor = props.trailColor,
  36. prefixCls = props.prefixCls;
  37. var temp = [];
  38. for (var i = 0; i < steps; i += 1) {
  39. var _cls;
  40. var cls = (_cls = {}, _defineProperty(_cls, "".concat(prefixCls, "-steps-item"), true), _defineProperty(_cls, "".concat(prefixCls, "-steps-item-active"), i <= current.value - 1), _cls);
  41. temp.push(_createVNode("div", {
  42. "key": i,
  43. "class": cls,
  44. "style": {
  45. backgroundColor: i <= current.value - 1 ? strokeColor : trailColor,
  46. width: "".concat(stepWidth.value, "px"),
  47. height: "".concat(strokeWidth, "px")
  48. }
  49. }, null));
  50. }
  51. return temp;
  52. });
  53. return function () {
  54. var _slots$default;
  55. return _createVNode("div", {
  56. "class": "".concat(props.prefixCls, "-steps-outer")
  57. }, [styledSteps.value, (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
  58. };
  59. }
  60. });