uv-ui/es/components/slider/slider.js

基于vue3的移动端组件库

import { inject as x, ref as u, watch as C, onMounted as k, openBlock as N, createElementBlock as z, normalizeStyle as n, createElementVNode as d, normalizeClass as T, withModifiers as B, renderSlot as R } from "vue";
import { useTouch as w } from "../../hooks/useTouch.js";
import "../../hooks/useCountDown.js";
import "./slider.vue_vue_type_style_index_0_lang.js";
const H = ["onTouchmove"], j = {
  name: "UvSlider"
}, $ = /* @__PURE__ */ Object.assign(j, {
  props: {
    modelValue: {
      type: Number,
      default: 0
    },
    inactiveColor: {
      type: String,
      default: "#ebedf0"
    },
    activeColor: {
      type: String,
      default: "#1989fa"
    },
    barHeight: {
      type: [String, Number],
      default: 3
    },
    buttonSize: {
      type: [String, Number],
      default: 24
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    }
  },
  emits: ["update:modelValue", "change", "drag-start", "drag-end"],
  setup(l, { emit: r }) {
    const e = l, { props: m, validateBlurOrChange: h } = x("form-item", {}), i = w(), s = u(null), g = u(null), c = u(""), a = u(e.modelValue), v = u(""), o = u("");
    C(() => e.modelValue, (t) => {
      t !== a.value && (a.value = t);
    }), k(() => {
      c.value = s.value.offsetWidth;
    });
    function b(t) {
      i.start(t), a.value = e.modelValue, v.value = e.modelValue, o.value = "start";
    }
    function p(t) {
      if (e.disabled)
        return;
      o.value === "start" && r("drag-start", t), i.move(t), o.value = "dragging";
      const f = i.deltaX.value, S = c.value, V = parseInt(f / S * (e.max - e.min));
      a.value = v.value + V, a.value < e.min ? a.value = e.min : a.value > e.max && (a.value = e.max), r("update:modelValue", a.value);
    }
    function y(t) {
      o.value === "dragging" && (r("drag-end", t), r("change", e.modelValue)), o.value = "", m && h("change");
    }
    return (t, f) => (N(), z("div", {
      class: "uv-slider",
      style: n({ backgroundColor: l.inactiveColor, height: l.barHeight + "px" }),
      ref_key: "sliderRef",
      ref: s
    }, [
      d("div", {
        style: n({ width: `${a.value}%`, backgroundColor: l.activeColor, height: l.barHeight + "px" }),
        class: T(["uv-slider-value", l.disabled ? "uv-slider-value-disabled" : ""])
      }, [
        d("div", {
          class: "uv-slider-circle",
          ref_key: "sliderValueRef",
          ref: g,
          onTouchstart: b,
          onTouchmove: B(p, ["stop"]),
          onTouchend: y
        }, [
          R(t.$slots, "button", {}, () => [
            d("div", {
              class: "uv-slider-circle-content",
              style: n({ width: l.buttonSize + "px", height: l.buttonSize + "px" })
            }, null, 4)
          ])
        ], 40, H)
      ], 6)
    ], 4));
  }
});
export {
  $ as default
};