index.js 1.4 KB

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