@atooyu/uxto-ui 1.0.0

package/src/components/u-slider/u-slider.vue

@@ -0,0 +1,453 @@
+<template>
+  <view
+    class="u-slider"
+    :class="{
+      'u-slider--disabled': disabled
+    }"
+  >
+    <!-- 最小值标签 -->
+    <view v-if="showMinMax" class="u-slider__min">
+      <text class="u-slider__label">{{ min }}</text>
+    </view>
+
+    <!-- 滑动轨道 -->
+    <view
+      class="u-slider__track"
+      :style="trackStyle"
+      @click="handleTrackClick"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+    >
+      <!-- 已选择区域 -->
+      <view class="u-slider__bar" :style="barStyle">
+        <!-- 滑块 -->
+        <view
+          v-if="!range"
+          class="u-slider__button"
+          :style="buttonStyle"
+          @touchstart.stop="handleButtonTouchStart"
+          @touchmove.stop="handleButtonTouchMove"
+          @touchend.stop="handleButtonTouchEnd"
+        >
+          <view v-if="showValue" class="u-slider__tooltip">
+            <text class="u-slider__tooltip-text">{{ currentValue }}</text>
+          </view>
+        </view>
+
+        <!-- 双滑块 -->
+        <template v-else>
+          <view
+            class="u-slider__button u-slider__button--start"
+            :style="startButtonStyle"
+            @touchstart.stop="handleStartButtonTouchStart"
+            @touchmove.stop="handleStartButtonTouchMove"
+            @touchend.stop="handleButtonTouchEnd"
+          >
+            <view v-if="showValue" class="u-slider__tooltip">
+              <text class="u-slider__tooltip-text">{{ startValue }}</text>
+            </view>
+          </view>
+          <view
+            class="u-slider__button u-slider__button--end"
+            :style="endButtonStyle"
+            @touchstart.stop="handleEndButtonTouchStart"
+            @touchmove.stop="handleEndButtonTouchMove"
+            @touchend.stop="handleButtonTouchEnd"
+          >
+            <view v-if="showValue" class="u-slider__tooltip">
+              <text class="u-slider__tooltip-text">{{ endValue }}</text>
+            </view>
+          </view>
+        </template>
+      </view>
+
+      <!-- 刻度标记 -->
+      <view v-if="showTicks" class="u-slider__ticks">
+        <view
+          v-for="(tick, index) in ticks"
+          :key="index"
+          class="u-slider__tick"
+          :style="{ left: tick.position + '%' }"
+        ></view>
+      </view>
+    </view>
+
+    <!-- 最大值标签 -->
+    <view v-if="showMinMax" class="u-slider__max">
+      <text class="u-slider__label">{{ max }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  modelValue?: number | [number, number]
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  range?: boolean
+  showValue?: boolean
+  showMinMax?: boolean
+  showTicks?: boolean
+  barHeight?: number | string
+  activeColor?: string
+  inactiveColor?: string
+  buttonColor?: string
+  buttonSize?: number | string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  range: false,
+  showValue: false,
+  showMinMax: false,
+  showTicks: false,
+  barHeight: 2,
+  activeColor: '#1989fa',
+  inactiveColor: '#e5e5e5',
+  buttonColor: '#fff',
+  buttonSize: 24
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | [number, number]]
+  change: [value: number | [number, number]]
+  dragstart: []
+  dragend: []
+}>()
+
+const currentValue = ref(0)
+const startValue = ref(0)
+const endValue = ref(100)
+const trackWidth = ref(0)
+const trackLeft = ref(0)
+const isDragging = ref(false)
+const dragType = ref<'single' | 'start' | 'end'>('single')
+
+const barHeightStyle = computed(() => {
+  const height = props.barHeight
+  return typeof height === 'number' ? `${height}px` : height
+})
+
+const buttonSizeStyle = computed(() => {
+  const size = props.buttonSize
+  return typeof size === 'number' ? `${size}px` : size
+})
+
+const trackStyle = computed(() => ({
+  height: barHeightStyle.value,
+  backgroundColor: props.inactiveColor
+}))
+
+const barStyle = computed(() => {
+  if (props.range) {
+    const startPercent = ((startValue.value - props.min) / (props.max - props.min)) * 100
+    const endPercent = ((endValue.value - props.min) / (props.max - props.min)) * 100
+    return {
+      left: `${startPercent}%`,
+      width: `${endPercent - startPercent}%`,
+      height: barHeightStyle.value,
+      backgroundColor: props.activeColor
+    }
+  }
+  const percent = ((currentValue.value - props.min) / (props.max - props.min)) * 100
+  return {
+    width: `${percent}%`,
+    height: barHeightStyle.value,
+    backgroundColor: props.activeColor
+  }
+})
+
+const buttonStyle = computed(() => ({
+  width: buttonSizeStyle.value,
+  height: buttonSizeStyle.value,
+  backgroundColor: props.buttonColor,
+  borderColor: props.activeColor
+}))
+
+const startButtonStyle = computed(() => ({
+  ...buttonStyle.value,
+  left: `-${parseInt(buttonSizeStyle.value) / 2}px`
+}))
+
+const endButtonStyle = computed(() => ({
+  ...buttonStyle.value,
+  right: `-${parseInt(buttonSizeStyle.value) / 2}px`
+}))
+
+const ticks = computed(() => {
+  const tickCount = Math.floor((props.max - props.min) / props.step)
+  const result = []
+  for (let i = 0; i <= tickCount; i++) {
+    result.push({
+      position: (i / tickCount) * 100
+    })
+  }
+  return result
+})
+
+watch(() => props.modelValue, (val) => {
+  if (props.range && Array.isArray(val)) {
+    startValue.value = val[0]
+    endValue.value = val[1]
+  } else if (typeof val === 'number') {
+    currentValue.value = val
+  }
+}, { immediate: true })
+
+const updateTrackRect = () => {
+  // uni-app 中需要使用 createSelectorQuery
+  // 这里简化处理，在touch事件中动态计算
+  const query = uni.createSelectorQuery?.()
+  if (query) {
+    query.select('.u-slider__track').boundingClientRect((rect: any) => {
+      if (rect) {
+        trackWidth.value = rect.width
+        trackLeft.value = rect.left
+      }
+    }).exec()
+  }
+}
+
+const getStepValue = (value: number): number => {
+  const stepCount = Math.round((value - props.min) / props.step)
+  return props.min + stepCount * props.step
+}
+
+const updateValue = (value: number) => {
+  const stepped = getStepValue(value)
+  currentValue.value = stepped
+  emit('update:modelValue', stepped)
+  emit('change', stepped)
+}
+
+const updateRangeValue = (type: 'start' | 'end', value: number) => {
+  const stepped = getStepValue(value)
+  if (type === 'start') {
+    if (stepped < endValue.value) {
+      startValue.value = stepped
+    }
+  } else {
+    if (stepped > startValue.value) {
+      endValue.value = stepped
+    }
+  }
+  emit('update:modelValue', [startValue.value, endValue.value])
+  emit('change', [startValue.value, endValue.value])
+}
+
+const handleTrackClick = (event: any) => {
+  if (props.disabled) return
+  if (!trackWidth.value) updateTrackRect()
+
+  // 获取触摸/点击位置（兼容各平台）
+  const touch = event.touches?.[0] || event
+  const x = touch.clientX || touch.x || 0
+  const percent = (x - trackLeft.value) / trackWidth.value
+  const value = props.min + percent * (props.max - props.min)
+
+  if (props.range) {
+    if (Math.abs(value - startValue.value) < Math.abs(value - endValue.value)) {
+      updateRangeValue('start', value)
+    } else {
+      updateRangeValue('end', value)
+    }
+  } else {
+    updateValue(value)
+  }
+}
+
+const handleTouchStart = (event: any) => {
+  if (props.disabled) return
+  // 初始化轨道位置信息
+  const touch = event.touches?.[0]
+  if (touch) {
+    trackWidth.value = 1 // 初始化避免为0
+  }
+}
+
+const handleTouchMove = (event: any) => {
+  // 轨道触摸移动处理
+}
+
+const handleButtonTouchStart = () => {
+  if (props.disabled) return
+  isDragging.value = true
+  dragType.value = 'single'
+  emit('dragstart')
+  updateTrackRect()
+}
+
+const handleButtonTouchMove = (event: any) => {
+  if (!isDragging.value || props.disabled) return
+
+  // 获取触摸位置（兼容各平台）
+  const touch = event.touches?.[0] || event
+  const x = touch.clientX || touch.x || 0
+
+  const percent = (x - trackLeft.value) / trackWidth.value
+  const value = props.min + Math.max(0, Math.min(1, percent)) * (props.max - props.min)
+  updateValue(value)
+}
+
+const handleButtonTouchEnd = () => {
+  isDragging.value = false
+  emit('dragend')
+}
+
+const handleStartButtonTouchStart = () => {
+  if (props.disabled) return
+  isDragging.value = true
+  dragType.value = 'start'
+  emit('dragstart')
+  updateTrackRect()
+}
+
+const handleStartButtonTouchMove = (event: any) => {
+  if (!isDragging.value || props.disabled) return
+
+  // 获取触摸位置（兼容各平台）
+  const touch = event.touches?.[0] || event
+  const x = touch.clientX || touch.x || 0
+
+  const percent = (x - trackLeft.value) / trackWidth.value
+  const value = props.min + Math.max(0, Math.min(1, percent)) * (props.max - props.min)
+  updateRangeValue('start', value)
+}
+
+const handleEndButtonTouchStart = () => {
+  if (props.disabled) return
+  isDragging.value = true
+  dragType.value = 'end'
+  emit('dragstart')
+  updateTrackRect()
+}
+
+const handleEndButtonTouchMove = (event: any) => {
+  if (!isDragging.value || props.disabled) return
+
+  // 获取触摸位置（兼容各平台）
+  const touch = event.touches?.[0] || event
+  const x = touch.clientX || touch.x || 0
+
+  const percent = (x - trackLeft.value) / trackWidth.value
+  const value = props.min + Math.max(0, Math.min(1, percent)) * (props.max - props.min)
+  updateRangeValue('end', value)
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-slider {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: $--spacing-md 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__min,
+  &__max {
+    min-width: 32px;
+    text-align: center;
+  }
+
+  &__label {
+    font-size: $--font-size-sm;
+    color: $--text-color-2;
+  }
+
+  &__track {
+    flex: 1;
+    position: relative;
+    border-radius: 999px;
+  }
+
+  &__bar {
+    position: absolute;
+    border-radius: 999px;
+    transition: width 0.1s, left 0.1s;
+  }
+
+  &__button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    border: 2px solid $--color-primary;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.1s;
+
+    &:active {
+      transform: translateY(-50%) scale(1.2);
+    }
+
+    &--start {
+      left: calc(-1 * $--slider-button-size / 2);
+    }
+
+    &--end {
+      right: calc(-1 * $--slider-button-size / 2);
+    }
+  }
+
+  &__tooltip {
+    position: absolute;
+    left: 50%;
+    bottom: 100%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    background: $--text-color;
+    color: #fff;
+    font-size: $--font-size-xs;
+    border-radius: $--border-radius-sm;
+    white-space: nowrap;
+    margin-bottom: 8px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 4px solid transparent;
+      border-top-color: $--text-color;
+    }
+  }
+
+  &__ticks {
+    position: absolute;
+    inset: 0;
+  }
+
+  &__tick {
+    position: absolute;
+    width: 2px;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.1);
+    transform: translateX(-50%);
+  }
+}
+</style>