index.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import { use } from '../utils';
  2. import { GREEN } from '../utils/color';
  3. import Icon from '../icon';
  4. const [sfc, bem] = use('steps');
  5. export default sfc({
  6. props: {
  7. icon: String,
  8. title: String,
  9. active: Number,
  10. iconClass: String,
  11. description: String,
  12. direction: {
  13. type: String,
  14. default: 'horizontal'
  15. },
  16. activeColor: {
  17. type: String,
  18. default: GREEN
  19. },
  20. activeIcon: {
  21. type: String,
  22. default: 'checked'
  23. }
  24. },
  25. data() {
  26. return {
  27. steps: []
  28. };
  29. },
  30. render(h) {
  31. const { icon, title, description, slots } = this;
  32. const StatusIcon = (slots('icon') || icon) && (
  33. <div class={bem('icon')}>{slots('icon') || <Icon name={icon} class={this.iconClass} />}</div>
  34. );
  35. const StatusMessage = (
  36. <div class={bem('message')}>
  37. <div class={bem('title')}>{title}</div>
  38. <div class={[bem('desc'), 'van-ellipsis']}>{description}</div>
  39. </div>
  40. );
  41. return (
  42. <div class={bem([this.direction])}>
  43. {(title || description) && (
  44. <div class={bem('status')}>
  45. {StatusIcon}
  46. {StatusMessage}
  47. {slots('message-extra')}
  48. </div>
  49. )}
  50. <div class={bem('items', { alone: !title && !description })}>{slots()}</div>
  51. </div>
  52. );
  53. }
  54. });