aurora-admin/frameworks/Slider.vue2.vue

<template>
  <div class="kole-slider" :class="{ 'is-disabled': disabled }">
    <div class="kole-slider-track" ref="track" @pointerdown="onTrackDown">
      <div class="kole-slider-rail"></div>
      <div class="kole-slider-fill" :style="fillStyle"></div>
      <div class="kole-slider-ticks" v-if="showTicks">
        <div v-for="(t, i) in tickPercents" :key="i" class="kole-slider-tick" :style="{ left: t + '%' }"></div>
      </div>
      <div
        v-for="(h, i) in handlePercents" :key="i"
        class="kole-slider-handle" :style="{ left: h + '%' }"
        @pointerdown.stop="onHandleDown(i, $event)"
      ></div>
    </div>
    <div class="kole-slider-value" v-if="showInput">
      <template v-if="range">
        <input type="number" :value="value[0]" @change="onInput(0, $event)" />
        <span>—</span>
        <input type="number" :value="value[1]" @change="onInput(1, $event)" />
      </template>
      <input v-else type="number" :value="value" @change="onInput(null, $event)" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleSlider',
  props: {
    value: { type: [Number, Array], default: 0 },        // number | [lo, hi]
    min: { type: Number, default: 0 },
    max: { type: Number, default: 100 },
    step: { type: Number, default: 1 },
    range: { type: Boolean, default: false },
    showTicks: { type: Boolean, default: false },
    showInput: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false }
  },
  data() { return { dragIndex: -1 }; },
  computed: {
    pct() { return (v) => ((v - this.min) / (this.max - this.min)) * 100; },
    clamp() {
      return (v) => {
        const snapped = Math.round((v - this.min) / this.step) * this.step + this.min;
        return Math.max(this.min, Math.min(this.max, snapped));
      };
    },
    handlePercents() {
      if (this.range) return [this.pct(this.value[0]), this.pct(this.value[1])];
      return [this.pct(this.value)];
    },
    fillStyle() {
      if (this.range) {
        const lo = this.pct(this.value[0]), hi = this.pct(this.value[1]);
        return { left: lo + '%', width: (hi - lo) + '%' };
      }
      return { left: '0%', width: this.pct(this.value) + '%' };
    },
    tickPercents() {
      const n = Math.floor((this.max - this.min) / this.step);
      return Array.from({ length: n + 1 }, (_, i) => this.pct(this.min + i * this.step));
    }
  },
  methods: {
    setVal(next) { this.$emit('input', next); this.$emit('change', next); },
    valueFromClientX(x) {
      const rect = this.$refs.track.getBoundingClientRect();
      return this.clamp(this.min + (x - rect.left) / rect.width * (this.max - this.min));
    },
    onHandleDown(i, e) {
      if (this.disabled) return;
      e.preventDefault();
      this.dragIndex = i;
      window.addEventListener('pointermove', this.onMove);
      window.addEventListener('pointerup', this.onUp);
    },
    onTrackDown(e) {
      if (this.disabled || e.target.classList.contains('kole-slider-handle')) return;
      const nv = this.valueFromClientX(e.clientX);
      if (this.range) {
        const i = Math.abs(nv - this.value[0]) <= Math.abs(nv - this.value[1]) ? 0 : 1;
        const arr = [...this.value]; arr[i] = nv; arr.sort((a, b) => a - b);
        this.setVal(arr);
      } else {
        this.setVal(nv);
      }
    },
    onMove(e) {
      if (this.dragIndex < 0) return;
      const nv = this.valueFromClientX(e.clientX);
      if (this.range) {
        const arr = [...this.value]; arr[this.dragIndex] = nv; arr.sort((a, b) => a - b);
        this.setVal(arr);
      } else {
        this.setVal(nv);
      }
    },
    onUp() {
      this.dragIndex = -1;
      window.removeEventListener('pointermove', this.onMove);
      window.removeEventListener('pointerup', this.onUp);
    },
    onInput(i, e) {
      const v = +e.target.value;
      if (this.range) {
        const arr = [...this.value]; arr[i] = v; arr.sort((a, b) => a - b);
        this.setVal(arr);
      } else {
        this.setVal(v);
      }
    }
  },
  beforeDestroy() { this.onUp(); }
};
</script>

<!-- 样式对齐 组件7.txt SliderInput 规范 -->
<style>
.kole-slider { position: relative; display: flex; align-items: center; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); }
.kole-slider.is-disabled { opacity: .5; pointer-events: none; }
.kole-slider-track { position: relative; flex: 1; height: 40px; }
.kole-slider-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #E8ECF1; border-radius: 2px; }
.kole-slider-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: #2F54EB; border-radius: 2px; }
.kole-slider-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 2px solid #2F54EB; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: box-shadow .15s; }
.kole-slider-handle:hover, .kole-slider-handle:focus { box-shadow: 0 0 0 4px rgba(47,84,235,0.2); outline: none; }
.kole-slider-ticks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 0; pointer-events: none; }
.kole-slider-tick { position: absolute; top: 0; width: 2px; height: 8px; background: #E8ECF1; transform: translate(-50%, -50%); }
.kole-slider-value { margin-left: 12px; font-size: 14px; color: #262626; display: inline-flex; align-items: center; gap: 6px; }
.kole-slider-value input { width: 56px; height: 28px; text-align: center; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; color: #262626; }
.kole-slider-value input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
</style>