vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
57 lines (56 loc) • 2.43 kB
JavaScript
import { ref as b, computed as c } from "vue";
const $ = (e, r, d) => {
const h = b(!1), v = c(() => ({
"is-horizontal": e.direction === "horizontal",
"is-vertical": e.direction === "vertical",
"is-disabled": e.disabled ? e.disabled : !1
})), f = c(() => ({
...e.direction === "vertical" ? { height: `${e.height}px` } : {},
"--slider-size": `${e.width}px`,
"--slider-theme": e.theme ? e.theme : "var(--app-theme)"
})), o = c(() => (e.modelValue - e.min) / (e.max - e.min) * 100), w = c(() => e.direction === "horizontal" ? { width: `${o.value}%` } : { height: `${o.value}%` }), g = c(() => {
if (e.direction === "horizontal")
return { left: `${o.value}%` };
{
const i = 16 / (e.height || 200) * 100 / 2;
return {
bottom: `calc(${o.value}% - ${i}%)`
};
}
}), s = (i, l) => {
if (!r.value)
return;
const a = r.value.getBoundingClientRect();
let n = 0;
e.direction === "horizontal" ? n = (i - a.left) / a.width : n = (a.bottom - l) / a.height, n = Math.min(1, Math.max(0, n));
let t = e.min + n * (e.max - e.min);
t = Math.round(t / e.step) * e.step, t = Math.min(e.max, Math.max(e.min, t)), t !== e.modelValue && d("update:modelValue", t);
};
return {
classNames: v,
styles: f,
fillStyle: w,
thumbStyle: g,
onClickTrack: (i) => {
e.disabled || (s(i.clientX, i.clientY), d("change", e.modelValue));
},
startDrag: (i) => {
if (e.disabled)
return;
i.cancelable && i.preventDefault(), h.value = !0;
let l = 0;
const a = (t) => {
t.cancelable && t.preventDefault(), l && cancelAnimationFrame(l), l = requestAnimationFrame(() => {
let u = 0, m = 0;
"touches" in t ? (u = t.touches[0].clientX, m = t.touches[0].clientY) : (u = t.clientX, m = t.clientY), s(u, m);
});
}, n = () => {
h.value = !1, d("change", e.modelValue), window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", n), window.removeEventListener("touchmove", a), window.removeEventListener("touchend", n), l && cancelAnimationFrame(l);
};
window.addEventListener("mousemove", a, { passive: !1 }), window.addEventListener("mouseup", n, { once: !0 }), window.addEventListener("touchmove", a, { passive: !1 }), window.addEventListener("touchend", n, { passive: !0 });
}
};
};
export {
$ as useSlider
};