grid-item.wxml 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <import src="../common/template/image.wxml" />
  2. <import src="../common/template/icon.wxml" />
  3. <wxs module="util">
  4. module.exports.getImageSize = function(column) { if (column >= 5) return 'small'; if (column == 4) return 'middle';
  5. return 'large'; }
  6. </wxs>
  7. <wxs module="_" src="../common/utils.wxs" />
  8. <view
  9. class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} {{prefix}}-class"
  10. style="{{ gridItemStyle }}"
  11. hover-class="{{hover ? classPrefix + '--hover':''}}"
  12. hover-stay-time="{{200}}"
  13. bindtap="onClick"
  14. aria-role="{{ariaRole || 'button'}}"
  15. aria-labelledby="{{labelID}}"
  16. >
  17. <view class="{{_.cls(classPrefix + '__wrapper', [layout])}}" style="{{gridItemWrapperStyle}}">
  18. <view
  19. class="{{_.cls(classPrefix + '__content', [align, layout])}} {{prefix}}-class-content"
  20. style="{{gridItemContentStyle}}"
  21. >
  22. <slot />
  23. <t-badge
  24. wx:if="{{image || icon}}"
  25. color="{{badgeProps.color}}"
  26. content="{{badgeProps.content}}"
  27. count="{{badgeProps.count}}"
  28. dot="{{badgeProps.dot}}"
  29. max-count="{{badgeProps.maxCount || 99}}"
  30. offset="{{badgeProps.offset}}"
  31. shape="{{badgeProps.shape || 'circle'}}"
  32. show-zero="{{badgeProps.showZero}}"
  33. size="{{badgeProps.size || 'medium'}}"
  34. t-class="{{badgeProps.tClass}}"
  35. t-class-content="{{badgeProps.tClassContent}}"
  36. t-class-count="{{badgeProps.tClassCount}}"
  37. >
  38. <view
  39. class="{{_.cls(classPrefix + '__image', [util.getImageSize(column), ['icon', icon]])}} {{prefix}}-class-image"
  40. >
  41. <block wx:if="{{image && image !== 'slot'}}">
  42. <template
  43. is="image"
  44. data="{{ src: image, shape: 'round', mode: 'widthFix', tClass: _.cls(classPrefix + '__image', [util.getImageSize(column)]), ...imageProps }}"
  45. />
  46. </block>
  47. <slot wx:else name="image" />
  48. <template
  49. wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
  50. is="icon"
  51. data="{{class: classPrefix + '__icon', name: iconName, ...iconData}}"
  52. />
  53. </view>
  54. </t-badge>
  55. <view class="{{_.cls(classPrefix + '__words', [layout])}}" id="{{labelID}}">
  56. <view
  57. wx:if="{{text && text !== 'slot'}}"
  58. class="{{_.cls(classPrefix + '__text', [util.getImageSize(column), layout])}} {{prefix}}-class-text"
  59. >
  60. {{text}}
  61. </view>
  62. <slot wx:else name="text" class="{{prefix}}-class-text" />
  63. <view
  64. wx:if="{{description && description!== 'slot'}}"
  65. class="{{_.cls(classPrefix + '__description', [util.getImageSize(column), layout])}} {{prefix}}-class-description"
  66. >
  67. {{description}}
  68. </view>
  69. <slot wx:else name="description" class="{{prefix}}-class-description" />
  70. </view>
  71. </view>
  72. </view>
  73. </view>