index.js 1.4 KB

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