form-picker.wxml 1.3 KB

123456789101112131415161718192021
  1. <!--components/form-picker/form-picker.wxml-->
  2. <wxs src="./picker.wxs" module="_" />
  3. <view class="form-picker">
  4. <t-popup t-class="form-picker__inner" visible="{{ visible }}" bind:visible-change="onCancel" placement="bottom" close-on-overlay-click="{{closeOnOverlayClick}}" bind:visible-change="onVisibleChange">
  5. <view class="form-picker__header">
  6. <view class="btn btn--cancel" aria-role="button" bind:tap="onCancel">取消</view>
  7. <view class="title">{{title}}</view>
  8. <view class="btn btn--confirm" aria-role="button" bind:tap="onConfirm">确定</view>
  9. </view>
  10. <view class="form-picker__content">
  11. <scroll-view type="custom" scroll-y style="height: {{containerHeight}}px;">
  12. <grid-builder list="{{options}}" cross-axis-count="{{optionsColumns}}" cross-axis-gap="{{gap}}" main-axis-gap="{{gap}}">
  13. <view slot:item slot:index class="card {{_.getClassName(selected, item)}}" style="height: {{itemHeight}}px;" data-index="{{index}}" bind:tap="handle">
  14. <t-icon wx:if="{{_.contain(selected, item.value)}}" name="check" t-class="card__icon" ariaHidden="{{true}}" />
  15. <text overflow="ellipsis" max-lines="3">{{item.label}}</text>
  16. </view>
  17. </grid-builder>
  18. </scroll-view>
  19. </view>
  20. </t-popup>
  21. </view>