vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
49 lines (48 loc) • 2.42 kB
JavaScript
import { ref as l, computed as b } from "vue";
const p = (a, t, u, s, o) => {
const r = {
text: "请按住滑块拖动",
successText: "验证通过"
}, d = l(!1), i = l(!1), n = l(!1), f = l(0), c = l(0), h = l(0), M = l(90), y = l(270), V = b({
get: () => a.modelValue ? a.successText || r.successText : a.text || r.text,
set: (e) => e
}), x = () => {
const e = Math.floor(M.value + Math.random() * (y.value - M.value));
c.value = e, t.value && (t.value.style.transform = `rotateZ(${e}deg)`, t.value.style.transition = "0.5s");
}, g = () => {
o("update:modelValue", !1), d.value = !1, i.value = !1, n.value = !1, u.value && (u.value.style.left = "0"), s.value && (s.value.style.width = "0");
}, T = (e) => {
e.cancelable && e.preventDefault(), a.modelValue || (n.value = !0, e instanceof MouseEvent ? f.value = e.pageX : e instanceof TouchEvent && (f.value = e.touches[0].pageX));
}, O = () => M.value === y.value ? Math.floor(1 + Math.random() * 6) / 10 + 1 : 1, D = (e) => {
if (e.cancelable && e.preventDefault(), n.value && !a.modelValue) {
let v = 0;
e instanceof MouseEvent ? v = e.pageX - f.value : e instanceof TouchEvent && (v = e.touches[0].pageX - f.value), u.value && (u.value.style.left = v + "px"), s.value && (s.value.style.width = v + 40 / 2 + "px");
const m = Math.ceil(v / 200 * y.value * O());
h.value = m, t.value && (t.value.style.transform = `rotateZ(${c.value - m}deg)`, t.value.style.transition = "0s");
}
}, X = () => {
d.value = !0, n.value = !1, o("result", !0), o("update:modelValue", !0);
};
return {
rotateIsOk: d,
rotateIsLoosen: i,
rotateIsMoving: n,
rotateMessage: V,
rotateOnLoad: x,
rotateOnMousedown: T,
rotateOnMousemove: D,
rotateOnMouseup: async () => {
!t.value || !s.value || !u.value || (n.value && !a.modelValue && (Math.abs(c.value - h.value) > (a.difference || 10) ? (i.value = !0, t.value.style.transform = `rotateZ(${c.value}deg)`, t.value.style.transition = "0.5s", setTimeout(() => {
u.value && (u.value.style.left = "0"), s.value && (s.value.style.width = "0"), i.value = !1;
}, 500), setTimeout(() => {
g(), x();
}, 650), o("result", !1), o("update:modelValue", !1)) : X()), n.value = !1);
},
rotateReset: () => {
g(), x(), V.value = a.text ?? r.text;
}
};
};
export {
p as useVerifyRotate
};