dropdown-item.wxml 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <wxs module="_this" src="./index.wxs" />
  2. <wxs module="_" src="../common/utils.wxs" />
  3. <view
  4. wx:if="{{wrapperVisible}}"
  5. class="{{classPrefix}} class {{prefix}}-class"
  6. style="{{_._style([_this.getStyles(top, zIndex), style, customStyle])}}"
  7. >
  8. <view
  9. class="{{ classPrefix }}__mask"
  10. hidden="{{!show}}"
  11. style="{{_._style(['height:' + maskHeight + 'px', style, customStyle])}}"
  12. bind:tap="handleMaskClick"
  13. catchtouchmove="closeDropdown"
  14. ></view>
  15. <t-popup
  16. visible="{{show}}"
  17. z-index="{{zIndex + 1}}"
  18. duration="{{duration}}"
  19. show-overlay="{{showOverlay}}"
  20. custom-style="position: absolute"
  21. overlay-props="{{ { style: 'position: absolute' } }}"
  22. bind:leaved="onLeaved"
  23. bind:visible-change="handleMaskClick"
  24. t-class="{{classPrefix}}__popup-host"
  25. t-class-content="{{classPrefix}}__content {{prefix}}-class-content"
  26. >
  27. <view class="{{classPrefix}}__body">
  28. <!-- 单选列表 -->
  29. <scroll-view
  30. wx:if="{{!multiple && options && options.length > 0}}"
  31. class="{{classPrefix}}__scroll"
  32. scroll-y
  33. scroll-into-view="id_{{value}}"
  34. >
  35. <t-radio-group
  36. class="{{classPrefix}}__radio {{prefix}}-class-column"
  37. t-class="{{classPrefix}}__radio-group"
  38. style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
  39. value="{{value}}"
  40. bind:change="handleRadioChange"
  41. >
  42. <view wx:for="{{options}}" wx:key="index" id="id_{{item[valueAlias]}}">
  43. <t-radio
  44. placement="{{placement}}"
  45. tabindex="0"
  46. icon="line"
  47. class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
  48. t-class="radio"
  49. t-class-label="{{prefix}}-class-column-item-label"
  50. value="{{item[valueAlias]}}"
  51. label="{{item[labelAlias]}}"
  52. disabled="{{item.disabled}}"
  53. />
  54. </view>
  55. </t-radio-group>
  56. </scroll-view>
  57. <!-- 多选列表 -->
  58. <scroll-view
  59. wx:if="{{multiple && options && options.length > 0}}"
  60. class="{{classPrefix}}__scroll"
  61. scroll-y
  62. scroll-into-view="id_{{firstCheckedValue}}"
  63. >
  64. <t-checkbox-group
  65. class="{{classPrefix}}__checkbox {{prefix}}-class-column"
  66. t-class="{{classPrefix}}__checkbox-group"
  67. style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
  68. value="{{value ? value : []}}"
  69. bind:change="handleRadioChange"
  70. >
  71. <view wx:for="{{options}}" wx:key="index" id="id_{{item[valueAlias]}}">
  72. <t-checkbox
  73. tabindex="0"
  74. class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
  75. theme="tag"
  76. value="{{item[valueAlias]}}"
  77. label="{{item[labelAlias]}}"
  78. disabled="{{item.disabled}}"
  79. ></t-checkbox>
  80. </view>
  81. </t-checkbox-group>
  82. </scroll-view>
  83. <slot />
  84. </view>
  85. <view class="{{classPrefix}}__footer {{prefix}}-class-footer">
  86. <slot name="footer" />
  87. <block wx:if="{{multiple}}">
  88. <t-button
  89. block
  90. class="{{classPrefix}}__footer-btn {{classPrefix}}__reset-btn"
  91. theme="light"
  92. content="重置"
  93. disabled="{{value.length == 0}}"
  94. bindtap="handleReset"
  95. />
  96. <t-button
  97. block
  98. class="{{classPrefix}}__footer-btn {{classPrefix}}__confirm-btn"
  99. theme="primary"
  100. content="确定"
  101. disabled="{{value.length == 0}}"
  102. bindtap="handleConfirm"
  103. />
  104. </block>
  105. </view>
  106. </t-popup>
  107. </view>