vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
32 lines (31 loc) • 1.52 kB
JavaScript
import { ref as f, computed as d } from "vue";
const L = (i, r) => {
const o = f(i.left), l = f(0), a = d(() => i.direction === "vertical"), h = d(() => a.value ? "row" : "column"), g = d(() => ({
[a.value ? "width" : "height"]: `${o.value}%`
}));
let s = !1, u = 0;
const v = (e) => {
!s || !r.value || (e.cancelable && e.preventDefault(), u && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
const t = r.value.getBoundingClientRect(), c = "touches" in e ? e.touches[0] : e;
let n = 0;
a.value ? (n = c.pageX - t.left - l.value, o.value = n / t.width * 100) : (n = c.pageY - t.top - l.value, o.value = n / t.height * 100), o.value = Math.min(Math.max(o.value, i.min), i.max);
}));
}, m = (e) => {
e.cancelable && e.stopPropagation(), s = !1, document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", m), document.removeEventListener("touchmove", v), document.removeEventListener("touchend", m), u && cancelAnimationFrame(u);
};
return {
leftPaneStyle: g,
directionType: h,
isVertical: a,
onMousedown: (e) => {
if (!r.value)
return;
s = !0;
const t = e.type === "touchstart", c = t ? e.touches[0] : e, n = e.target.getBoundingClientRect();
a.value ? l.value = c.pageX - n.left : l.value = c.pageY - n.top, document.addEventListener(t ? "touchmove" : "mousemove", v, { passive: !1 }), document.addEventListener(t ? "touchend" : "mouseup", m);
}
};
};
export {
L as useSplit
};