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

export default {
  name: 'KoleMSlider',
  props: {
    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: '滑动选择' }
  },
  data: function () {
    return {
      /* null = 跟随 value 属性；拖动后本地记账（与 Collapse 同一约定） */
      inner: null,
      dragging: false,
      active: -1,
      markPoints: [0, 25, 50, 75, 100]
    };
  },
  computed: {
    range: function () {
      return this.mode === 'range';
    },
    values: function () {
      if (this.inner) return this.inner;
      return this.range ? [this.value, this.valueMax] : [this.value];
    },
    sliderClass: function () {
      return [
        this.range ? 'kole-m-slider--range' : '',
        this.marks ? 'kole-m-slider--marks' : '',
        this.dragging ? 'is-dragging' : '',
        this.disabled ? 'is-disabled' : ''
      ].filter(Boolean);
    }
  },
  methods: {
    pct: function (v) {
      if (this.max === this.min) return '0%';
      return ((v - this.min) / (this.max - this.min)) * 100 + '%';
    },
    clamp: function (v) {
      var snapped = Math.round((v - this.min) / this.step) * this.step + this.min;
      return Math.max(this.min, Math.min(this.max, snapped));
    },
    valueAt: function (clientX) {
      var el = this.$refs.rail;
      if (!el) return this.min;
      var rect = el.getBoundingClientRect();
      if (!rect.width) return this.min;
      return this.clamp(this.min + ((clientX - rect.left) / rect.width) * (this.max - this.min));
    },
    nearest: function (v) {
      if (!this.range) return 0;
      return Math.abs(this.values[0] - v) <= Math.abs(this.values[1] - v) ? 0 : 1;
    },
    commit: function (index, v) {
      /* 双滑块：左值不越过右值、右值不越过左值（各留一个 step 的间距） */
      var next = this.clamp(v);
      if (this.range) {
        var other = this.values[1 - index];
        next = index === 0 ? Math.min(next, other - this.step) : Math.max(next, other + this.step);
      }
      var out = this.range ? [this.values[0], this.values[1]] : [next];
      out[index] = next;
      this.inner = out;
      this.$emit('change', this.range ? out : out[0]);
    },
    /* 手势起止都放在根元素上：整个控件（含两侧留白）都是有效起点 */
    onPointerDown: function (e) {
      if (this.disabled) return;
      if (e.target && e.target.closest && e.target.closest('.kole-m-slider__value')) return;
      var v = this.valueAt(e.clientX);
      this.active = this.nearest(v);
      this.dragging = true;
      this.commit(this.nearest(v), v);
      var el = this.$refs.rail;
      if (el && el.setPointerCapture) {
        try {
          el.setPointerCapture(e.pointerId);
        } catch (err) {
          /* 指针捕获不可用时靠冒泡事件继续跟随 */
        }
      }
    },
    onPointerMove: function (e) {
      if (this.active < 0) return;
      this.commit(this.active, this.valueAt(e.clientX));
    },
    onPointerUp: function () {
      if (this.active < 0) return;
      this.active = -1;
      this.dragging = false;
    },
    onKeyDown: function (e) {
      if (this.disabled || this.range) return;
      var delta =
        e.key === 'ArrowLeft' || e.key === 'ArrowDown'
          ? -this.step
          : e.key === 'ArrowRight' || e.key === 'ArrowUp'
            ? this.step
            : 0;
      if (!delta) return;
      e.preventDefault();
      this.commit(0, this.values[0] + delta);
    }
  }
};
</script>

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