aurora-admin/frameworks-mobile/Slider.vue3.vue

<template>
  <div
    class="kole-m-slider"
    :class="sliderClass"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="onPointerUp"
    @pointercancel="onPointerUp"
    @keydown="onKeyDown"
  >
    <span
      ref="rail"
      class="kole-m-slider__rail"
      :role="range ? 'group' : 'slider'"
      :tabindex="disabled ? null : 0"
      :aria-label="label"
      :aria-valuemin="min"
      :aria-valuemax="max"
      :aria-valuenow="range ? null : values[0]"
    >
      <span class="kole-m-slider__track">
        <span
          class="kole-m-slider__filled"
          :style="range ? { left: pct(values[0]), right: 100 - parseFloat(pct(values[1])) + '%' } : null"
        ></span>
        <template v-if="marks">
          <span
            v-for="m in markPoints"
            :key="'m' + m"
            class="kole-m-slider__mark"
            :style="{ left: m + '%' }"
          ></span>
        </template>
        <span
          v-for="(v, i) in values"
          :key="'t' + i"
          class="kole-m-slider__thumb"
          :style="{ left: pct(v) }"
        ></span>
      </span>
    </span>
    <span v-if="showValue" class="kole-m-slider__value">{{ range ? values[0] + '~' + values[1] : values[0] }}</span>
    <slot></slot>
  </div>
</template>

<script setup>
/* 滑动选择器（移动端）— 规格 §35
   轨道可视高度只有 4px，但**整条热区高度是 44px**：直接点轨道任意位置也要能跳到该处。
   浏览器端手势用 Pointer Events（pointerdown / pointermove / pointerup + setPointerCapture）；
   uni-app 端同一手势改用 @touch*（小程序与 App 端没有 PointerEvent）。
   值按 step 吸附并夹在 [min, max]；mode=range 时左值不越过右值。
   受控：本端不存储值，只回传目标值 change，是否采纳由宿主决定。 */
import { computed, ref } from 'vue';

const props = defineProps({
  value: { type: Number, default: 0 },
  valueMax: { type: Number, default: 100 },
  min: { type: Number, default: 0 },
  max: { type: Number, default: 100 },
  step: { type: Number, default: 1 },
  mode: { type: String, default: 'single' },
  marks: { type: Boolean, default: false },
  showValue: { type: Boolean, default: true },
  disabled: { type: Boolean, default: false },
  label: { type: String, default: '滑动选择' }
});
const emit = defineEmits(['change']);

const rail = ref(null);
const dragging = ref(false);
const active = ref(-1);
/* null = 跟随 value 属性；拖动后本地记账（与 Collapse 同一约定） */
const inner = ref(null);

const range = computed(() => props.mode === 'range');
const values = computed(() => inner.value || (range.value ? [props.value, props.valueMax] : [props.value]));
const markPoints = [0, 25, 50, 75, 100];

const sliderClass = computed(() => [
  range.value ? 'kole-m-slider--range' : '',
  props.marks ? 'kole-m-slider--marks' : '',
  dragging.value ? 'is-dragging' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

function pct(v) {
  if (props.max === props.min) return '0%';
  return ((v - props.min) / (props.max - props.min)) * 100 + '%';
}
function clamp(v) {
  const snapped = Math.round((v - props.min) / props.step) * props.step + props.min;
  return Math.max(props.min, Math.min(props.max, snapped));
}
function valueAt(clientX) {
  const el = rail.value;
  if (!el) return props.min;
  const rect = el.getBoundingClientRect();
  if (!rect.width) return props.min;
  return clamp(props.min + ((clientX - rect.left) / rect.width) * (props.max - props.min));
}
function nearest(v) {
  if (!range.value) return 0;
  return Math.abs(values.value[0] - v) <= Math.abs(values.value[1] - v) ? 0 : 1;
}
function commit(index, v) {
  /* 双滑块：左值不越过右值、右值不越过左值（各留一个 step 的间距） */
  let next = clamp(v);
  if (range.value) {
    const other = values.value[1 - index];
    next = index === 0 ? Math.min(next, other - props.step) : Math.max(next, other + props.step);
  }
  const out = range.value ? [values.value[0], values.value[1]] : [next];
  out[index] = next;
  inner.value = out;
  emit('change', range.value ? out : out[0]);
}

/* 手势起止都放在根元素上：整个控件（含两侧留白）都是有效起点 */
function onPointerDown(e) {
  if (props.disabled) return;
  if (e.target && e.target.closest && e.target.closest('.kole-m-slider__value')) return;
  const v = valueAt(e.clientX);
  active.value = nearest(v);
  dragging.value = true;
  commit(nearest(v), v);
  const el = rail.value;
  if (el && el.setPointerCapture) {
    try {
      el.setPointerCapture(e.pointerId);
    } catch (err) {
      /* 指针捕获不可用时靠冒泡事件继续跟随 */
    }
  }
}
function onPointerMove(e) {
  if (active.value < 0) return;
  commit(active.value, valueAt(e.clientX));
}
function onPointerUp() {
  if (active.value < 0) return;
  active.value = -1;
  dragging.value = false;
}
function onKeyDown(e) {
  if (props.disabled || range.value) return;
  const delta =
    e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -props.step : e.key === 'ArrowRight' || e.key === 'ArrowUp' ? props.step : 0;
  if (!delta) return;
  e.preventDefault();
  commit(0, values.value[0] + delta);
}
</script>

<style src="./Slider.css"></style>