12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <import-sjs
- from="./index.sjs"
- name="sliderSjs" />
- <template name="slider-handler">
- <view
- class="ant-slider-handler"
- style="left: {{ position }}%">
- <popover
- placement="top"
- visible="{{ showTooltip }}"
- showMask="{{ false }}">
- <slot name="slider">
- <view class="ant-slider-handler-block">
- <view class="ant-slider-handler-icon-default">
- <view class="ant-slider-handler-icon-default-line1" />
- <view class="ant-slider-handler-icon-default-line2" />
- <view class="ant-slider-handler-icon-default-line3" />
- </view>
- </view>
- </slot>
- <view
- slot="content"
- class="ant-slider-tooltip-content">
- <slot
- name="tooltip"
- value="{{ value }}">
- {{ value }}
- </slot>
- </view>
- </popover>
- </view>
- </template>
- <view
- class="ant-slider {{ className ? className : '' }}"
- style="opacity: {{ disabled ? '0.4' : '1' }};">
- <view
- class="ant-slider-track {{ showNumber ? 'ant-slider-track-number' : '' }}">
- <view
- class="ant-slider-track-touch-area"
- id="ant-slider-id-{{ $id || '' }}"
- onTouchStart="handleTrackTouchStart"
- onTouchEnd="handleTrackTouchEnd"
- onTouchMove="handleTrackTouchMove">
- <view class="ant-slider-track-fill">
- <view class="ant-slider-track-fill-background" />
- <view
- class="ant-slider-track-fill-front {{ activeLineClassName || '' }}"
- style="width: {{ sliderWidth }}%; left: {{ sliderLeft }}%; {{ activeLineStyle || '' }}" />
- <view class="ant-slider-showTicks">
- <block
- a:for="{{ tickList }}"
- a:for-index="index"
- a:for-item="item">
- <view
- class="ant-slider-tick ant-slider-tick-{{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) ? 'front' : 'back' }} {{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotClassName ? activeDotClassName : '' }}"
- style="left: {{ item.left }}%;{{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotStyle ? activeDotStyle : '' }}">
- <view
- a:if="{{ showNumber }}"
- class="ant-slider-tick-number">
- <slot
- name="tick"
- value="{{ item.value }}">
- {{ item.value }}
- </slot>
- </view>
- </view>
- </block>
- </view>
- <template
- a:if="{{ range }}"
- is="slider-handler"
- data="{{ position: sliderLeft, icon: icon, value: mixin.value[0], showTooltip: changingStart && showTooltip }}" />
- <template
- is="slider-handler"
- data="{{ position: sliderLeft + sliderWidth, icon: icon, value: range ? mixin.value[1] : mixin.value, showTooltip: changingEnd && showTooltip }}" />
- </view>
- </view>
- </view>
- <view />
- </view>
|