vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
45 lines (44 loc) • 2.17 kB
JavaScript
import { ref as d, computed as g } from "vue";
import { Utils as m } from "@vuux/utils";
const E = (u, l, a, o) => {
const x = {
text: "请按住滑块拖动",
successText: "验证通过"
}, n = d(0), h = d(!1), i = d(!1), s = d(!1), p = g({
get: () => u.modelValue ? u.successText || x.successText : u.text || x.text,
set: (e) => e
}), f = 40, c = 240, y = () => {
s.value = !1, h.value = !0, o("result", !0), o("update:modelValue", !0);
};
return {
sliderIsOk: h,
sliderIsLoosen: i,
sliderIsMoving: s,
sliderMessage: p,
sliderOnMousedown: (e) => {
e.cancelable && e.preventDefault(), u.modelValue || (s.value = !0, e instanceof MouseEvent ? n.value = e.pageX : e instanceof TouchEvent && (n.value = e.touches[0].pageX));
},
sliderOnMousemove: (e) => {
if (e.cancelable && e.preventDefault(), s.value && !u.modelValue) {
let t = 0;
e instanceof MouseEvent ? t = e.pageX - n.value : e instanceof TouchEvent && (t = e.touches[0].pageX - n.value);
const v = c - f;
t > 0 && t <= v ? (a.value && (a.value.style.left = t + "px"), l.value && (l.value.style.width = t + f / 2 + "px")) : t > v && (a.value && (a.value.style.left = v + "px"), l.value && (l.value.style.width = c - f / 2 + "px"), y());
}
},
sliderOnMouseup: async (e) => {
if (e.cancelable && e.stopPropagation(), s.value && !u.modelValue) {
let t = 0;
e instanceof MouseEvent ? t = e.pageX - n.value : e instanceof TouchEvent && (t = e.changedTouches[0].pageX - n.value);
const v = c - f;
t < v ? (i.value = !0, await m.wait(500), a.value && (a.value.style.left = "0"), l.value && (l.value.style.width = "0"), i.value = !1, o("result", !1), o("update:modelValue", !1)) : (a.value && (a.value.style.left = v + "px"), l.value && (l.value.style.width = c - f / 2 + "px"), y()), s.value = !1;
}
},
sliderReset: () => {
i.value = !1, s.value = !1, o("update:modelValue", !1), l.value && (l.value.style.width = "0"), a.value && (a.value.style.left = "0"), h.value = !1, p.value = u.text ?? x.text;
}
};
};
export {
E as useVerifySlider
};