step-item.wxml 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <view
  2. class="{{prefix}}-step {{prefix}}-step--{{layout}} {{prefix}}-step--{{theme}}-anchor {{prefix}}-step--{{isLastChild ? 'last-child':'not-last-child'}} {{prefix}}-class {{readonly ? prefix + '-step--readonly' : ''}}"
  3. >
  4. <view class="{{classPrefix}} {{classPrefix}}--{{curStatus}}">
  5. <view class=" {{classPrefix}}__inner {{isLarge ? classPrefix + '__inner--large' : '' }}">
  6. <view class="{{classPrefix}}-wrapper">
  7. <!-- icon -->
  8. <view class="{{classPrefix}}__icon" bindtap="click">
  9. <view wx:if="{{isDot}}" class="{{classPrefix}}__icon-dot"></view>
  10. <view
  11. wx:elif="{{computedIcon}}"
  12. class="{{classPrefix}}__icon-number {{isLarge ? (classPrefix + '__icon-number--large') : ''}}"
  13. >
  14. <slot wx:if="{{computedIcon === 'slot'}}" name="icon" />
  15. <t-icon wx:else name="{{computedIcon}}" size="{{isLarge ? '24px' : '16px'}}" />
  16. </view>
  17. <view wx:else class="{{classPrefix}}__icon-number">{{index + 1}}</view>
  18. </view>
  19. <!-- content -->
  20. <view class="{{classPrefix}}__content {{prefix}}-class-content">
  21. <view class="{{classPrefix}}__title {{prefix}}-class-title">
  22. {{ title }}
  23. <slot name="title" />
  24. </view>
  25. <view class="{{classPrefix}}__description {{prefix}}-class-description">
  26. {{ content }}
  27. <slot name="content" />
  28. </view>
  29. <view class="{{classPrefix}}__extra {{prefix}}-class-extra">
  30. <slot name="extra" />
  31. </view>
  32. </view>
  33. </view>
  34. <!-- 垂直 子步骤条 -->
  35. <view
  36. class="{{classPrefix}}__sub-wrapper"
  37. wx:if="{{ layout === 'vertical' && curSubStepItems.length && !isLastChild}}"
  38. >
  39. <!-- 子步骤条默认状态:default -->
  40. <view
  41. class="{{classPrefix}}-sub {{classPrefix}}-sub-status--default {{classPrefix}}-sub-status--{{item._status}}"
  42. wx:for="{{curSubStepItems}}"
  43. wx:key="key"
  44. wx:item="item"
  45. >
  46. <view class="{{classPrefix}}-sub-dot">
  47. <view class="{{classPrefix}}-sub-dot-item"></view>
  48. </view>
  49. <view class="{{classPrefix}}-sub__content"> {{item.title}}</view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </view>