| | |
| | | /** |
| | | * CNumberValve |
| | | * 数值滑块组件,用于在表单中通过滑块选择数值 |
| | | * 提供了滑动条和增减按钮两种方式来调整数值 |
| | | * 支持设置数值范围、步长和单位显示 |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | :required="itemRes.required" |
| | | :disabled="itemRes.disabled" |
| | | :error="itemRes.error" |
| | | :value="itemRes.formData[itemRes.name] + unit" |
| | | :value="valueStr" |
| | | :placeholder="placeholder" |
| | | > |
| | | <view class="at-icon at-icon-chevron-right"></view> |
| | |
| | | @touchstart="evt => handleTouchStart()" |
| | | @touchmove="evt => handleTouchMove(evt)" |
| | | ></view> |
| | | <view class="current"><text class="text">{{current}}</text></view> |
| | | <view class="current"> |
| | | <text |
| | | class="text m-text-ignore" |
| | | v-if="current===''" |
| | | >(请拖动)</text> |
| | | <text |
| | | class="text" |
| | | v-else |
| | | >{{current}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="btn"> |
| | |
| | | return { |
| | | opened: false, |
| | | rect: { width: 0, left: 0 }, |
| | | current: 0, |
| | | current: '', |
| | | sliderLeft: 0, |
| | | }; |
| | | }, |
| | | computed: {}, |
| | | computed: { |
| | | valueStr() { |
| | | if ( |
| | | this.itemRes.formData[this.itemRes.name] || |
| | | this.itemRes.formData[this.itemRes.name] === 0 |
| | | ) { |
| | | return this.itemRes.formData[this.itemRes.name] + ' ' + this.unit; |
| | | } else { |
| | | return ''; |
| | | } |
| | | }, |
| | | }, |
| | | methods: { |
| | | handleOpen() { |
| | | this.opened = true; |
| | |
| | | let $slider = null; |
| | | if (process.env.TARO_ENV === 'h5') { |
| | | $slider = $(this.$refs.slider.$el); |
| | | const rect = $slider[0].getBoundingClientRect(); |
| | | this.rect.width = rect.width; |
| | | this.rect.left = rect.left; |
| | | } else if (process.env.TARO_ENV === 'weapp') { |
| | | $slider = $(this.$refs.slider); |
| | | Taro.createSelectorQuery() |
| | | .select('#' + this.$refs.slider.uid) |
| | | .boundingClientRect(rect => { |
| | | this.rect.width = rect.width; |
| | | this.rect.left = rect.left; |
| | | }) |
| | | .exec(); |
| | | } |
| | | Taro.createSelectorQuery() |
| | | .select('#' + this.$refs.slider.uid) |
| | | .boundingClientRect(rect => { |
| | | this.rect.width = rect.width; |
| | | this.rect.left = rect.left; |
| | | }) |
| | | .exec(); |
| | | }, |
| | | handleChangeVal(type, value) { |
| | | this.updateRect(); |
| | |
| | | currentNext = Math.min(currentNext, this.range[1]); |
| | | // 设置 |
| | | const sliderLeft = Math.round( |
| | | ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100 |
| | | ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100, |
| | | ); |
| | | this.sliderLeft = sliderLeft; |
| | | this.current = currentNext; |