vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
68 lines (67 loc) • 4.03 kB
JavaScript
import { ref as g, computed as F } from "vue";
import { Utils as L } from "@vuux/utils";
const Q = (n, S, r, v, m, u, h) => {
const I = {
text: "请按住滑块拖动",
successText: "验证通过"
}, V = g(!1), y = g(!1), f = g(!1), c = g(0), C = g(0), b = 40, T = 8, W = F({
get: () => n.modelValue ? n.successText || I.successText : n.text || I.text,
set: (e) => e
}), M = async () => {
V.value = !0, f.value = !1, h("result", !0), h("update:modelValue", !0), await L.wait(300), u.value && (u.value.style.left = C.value + "px"), m.value && (m.value.style.display = "none");
}, A = (e) => e.getContext("2d", { willReadFrequently: !0 }), D = (e, t, l, i) => {
const a = b, o = T, s = Math.PI;
e.beginPath(), e.moveTo(t, l), e.arc(t + a / 2, l - o + 2, o, 0.72 * s, 2.26 * s), e.lineTo(t + a, l), e.arc(t + a + o - 2, l + a / 2, o, 1.21 * s, 2.78 * s), e.lineTo(t + a, l + a), e.lineTo(t, l + a), e.arc(t + o - 2, l + a / 2, o + 0.4, 2.76 * s, 1.24 * s, !0), e.lineTo(t, l), e.lineWidth = 1, e.fillStyle = "rgba(255, 255, 255, 0.6)", e.strokeStyle = "rgba(255, 255, 255, 0.6)", e.stroke(), e[i](), e.globalCompositeOperation = "destination-over";
}, w = () => {
!S.value || !m.value || !u.value || requestAnimationFrame(() => {
const e = S.value, t = m.value, l = u.value, i = e.clientHeight, a = e.clientWidth;
if (a === 0 || i === 0) {
setTimeout(w, 50);
return;
}
const o = A(t), s = A(l);
o.clearRect(0, 0, a, i), s.clearRect(0, 0, a, i);
const E = Math.floor(240 / 2), H = 25, P = 20, p = E + Math.ceil(Math.random() * (E - b - T - 5));
let d = H + Math.floor(Math.random() * (i - b - H - P));
t.setAttribute("width", a.toString()), t.setAttribute("height", i.toString()), t.style.display = "block", D(o, p, d, "fill"), C.value = p, l.setAttribute("width", a.toString()), l.setAttribute("height", i.toString()), l.style.display = "block";
const O = b + T * 2 + 3;
D(s, p, d, "clip"), s.drawImage(e, 0, 0, a, i), d = d - T * 2 - 1;
const q = s.getImageData(p, d, O, O);
l.setAttribute("width", O.toString()), l.setAttribute("height", i.toString()), s.putImageData(q, 0, d), l.style.left = "0", r.value && (r.value.style.left = "0"), v.value && (v.value.style.width = "0");
});
}, X = () => {
h("update:modelValue", !1), V.value = !1, y.value = !1, f.value = !1, r.value && (r.value.style.left = "0"), v.value && (v.value.style.width = "0"), u.value && (u.value.style.left = "0");
};
return {
puzzleIsOk: V,
puzzleIsLoosen: y,
puzzleIsMoving: f,
puzzleMessage: W,
puzzleCheckimgLoaded: w,
puzzleOnMousedown: (e) => {
e.cancelable && e.preventDefault(), n.modelValue || (f.value = !0, e instanceof MouseEvent ? c.value = e.pageX : e instanceof TouchEvent && (c.value = e.touches[0].pageX));
},
puzzleOnMousemove: (e) => {
if (e.cancelable && e.preventDefault(), f.value && !n.modelValue) {
let t = 0;
e instanceof MouseEvent ? t = e.pageX - c.value : e instanceof TouchEvent && (t = e.touches[0].pageX - c.value), r.value && (r.value.style.left = t + "px"), v.value && (v.value.style.width = t + 40 / 2 + "px"), u.value && (u.value.style.left = t + "px");
}
},
puzzleOnMouseup: async (e) => {
if (e.cancelable && e.stopPropagation(), f.value && !n.modelValue) {
let t = 0;
e instanceof MouseEvent ? t = e.pageX - c.value : e instanceof TouchEvent && (t = e.changedTouches[0].pageX - c.value), Math.abs(t - C.value) > (n.difference || 2) ? (y.value = !0, setTimeout(() => {
r.value && (r.value.style.left = "0"), v.value && (v.value.style.width = "0"), u.value && (u.value.style.left = "0"), y.value = !1;
}, 500), setTimeout(() => {
X(), w();
}, 650), h("result", !1), h("update:modelValue", !1)) : M(), f.value = !1;
}
},
puzzleReset: () => {
X(), w(), W.value = n.text ?? I.text;
}
};
};
export {
Q as useVerifyPuzzle
};