iking-slider-valid
Version:
金合前端组件
337 lines (336 loc) • 14.9 kB
JavaScript
import { defineComponent as K, computed as D, reactive as Q, ref as T, watch as Z, onMounted as ee, onBeforeUnmount as te, openBlock as k, createBlock as se, Teleport as oe, createElementVNode as n, normalizeClass as p, normalizeStyle as f, withModifiers as F, unref as u, toDisplayString as U, createElementBlock as N } from "vue";
const ie = ["width", "height"], ae = ["width", "height"], ne = ["width", "height"], le = /* @__PURE__ */ n("div", { class: "loading-gif_" }, [
/* @__PURE__ */ n("span"),
/* @__PURE__ */ n("span"),
/* @__PURE__ */ n("span"),
/* @__PURE__ */ n("span"),
/* @__PURE__ */ n("span")
], -1), he = [
le
], re = /* @__PURE__ */ n("path", {
d: "M512 85.312c108.544 0 206.272 40.512 280.64 107.008l49.536-49.28a42.88 42.88 0 0 1 6.4-6.08l-2.048 1.792a31.936 31.936 0 0 1 9.664-6.592 42.688 42.688 0 0 1 61.12 38.528v170.624a42.688 42.688 0 0 1-42.752 42.688h-18.88a42.496 42.496 0 0 1-4.928-0.064h-10.88l-117.44-0.384h-18.56a42.688 42.688 0 0 1-38.4-61.12 30.208 30.208 0 0 1 7.04-10.688l59.52-59.136A333.44 333.44 0 0 0 512 170.688 341.312 341.312 0 0 0 170.688 512a42.688 42.688 0 1 1-85.376 0A426.688 426.688 0 0 1 512 85.312z",
fill: "var(--ik-color-primary, #029ef7)",
"p-id": "7292"
}, null, -1), de = /* @__PURE__ */ n("path", {
d: "M896 469.312c23.552 0 42.688 19.136 42.688 42.688A426.688 426.688 0 0 1 512 938.688a418.304 418.304 0 0 1-280.384-106.816l-53.184 53.056a31.936 31.936 0 0 1-9.344 6.4l-1.792 0.704a42.688 42.688 0 0 1-60.672-38.72v-170.624a42.688 42.688 0 0 1 42.88-42.688H168.32a42.496 42.496 0 0 1 4.928 0.064h4.992l114.176 0.384h27.712a42.688 42.688 0 0 1 29.696 73.216 25.152 25.152 0 0 1-2.432 2.752l-55.232 55.04A333.44 333.44 0 0 0 512 853.44 341.312 341.312 0 0 0 853.312 512c0-23.552 19.136-42.688 42.688-42.688z",
fill: "var(--ik-color-icon-light-hover, #73c9fa)",
"p-id": "7293"
}, null, -1), ue = [
re,
de
], ce = /* @__PURE__ */ n("path", {
d: "M853.312 170.688a60.352 60.352 0 0 1 0 85.312L256 853.312A60.352 60.352 0 1 1 170.688 768L768 170.688a60.352 60.352 0 0 1 85.312 0z",
fill: "var(--ik-color-primary, #029ef7)",
"p-id": "7450"
}, null, -1), fe = /* @__PURE__ */ n("path", {
d: "M170.688 170.688a60.352 60.352 0 0 1 85.312 0L853.312 768A60.352 60.352 0 1 1 768 853.312L170.688 256a60.352 60.352 0 0 1 0-85.312z",
fill: "var(--ik-color-icon-light-hover, #73c9fa)",
"p-id": "7451"
}, null, -1), ge = [
ce,
fe
], we = { class: "auth-control_" }, ve = { class: "range-text" }, me = /* @__PURE__ */ n("div", null, null, -1), pe = /* @__PURE__ */ n("div", null, null, -1), xe = /* @__PURE__ */ n("div", null, null, -1), _e = [
me,
pe,
xe
], Me = /* @__PURE__ */ K({
__name: "iking-slider-valid",
props: {
width: { default: 320 },
height: { default: 170 },
show: { type: Boolean, default: !1 },
sliderSize: { default: 30 },
scale: { default: 1 },
range: { default: 10 },
images: { default: () => null },
successText: { default: "\u9A8C\u8BC1\u6210\u529F" },
failText: { default: "\u9A8C\u8BC1\u5931\u8D25" },
sliderText: { default: "\u62D6\u52A8\u6ED1\u5757\u5B8C\u6210\u9A8C\u8BC1" },
padding: { default: 15 },
el: { default: "body" }
},
emits: ["success", "fail", "close", "update:show"],
setup(y, { emit: b }) {
const o = y, V = () => navigator.userAgent.includes("Windows"), d = D(() => Math.max(Math.min(Math.round(o.sliderSize), Math.round(o.width * 0.5)))), h = D(() => Math.round(Math.max(Math.min(o.scale, 2), 0.2) * 52.5 + 6)), x = D(() => {
const { startWidth: s, newX: e, startX: i } = t, a = s + e - i;
return a < d.value ? d.value : a > o.width ? o.width : a;
}), t = Q({
mouseDown: !1,
startWidth: 50,
startX: 0,
newX: 0,
pinX: 0,
pinY: 0,
loading: !1,
isCanSlide: !1,
error: !1,
infoBoxShow: !1,
infoText: "",
infoBoxFail: !1,
timer1: void 0,
closeDown: !1,
isSuccess: !1,
imgIndex: -1,
isSubmting: !1
}), z = T(null), A = T(null), I = T(null), L = T(null);
Z(
() => o.show,
(s) => {
s && C();
}
), ee(() => {
document.addEventListener("mousemove", _, !1), document.addEventListener("mouseup", S, !1), document.addEventListener("touchmove", _, {
passive: !1
}), document.addEventListener("touchend", S, !1), document.body.classList.add("vue-puzzle-overflow"), o.show && C();
}), te(() => {
document.removeEventListener("mousemove", _, !1), document.removeEventListener("mouseup", S, !1), document.removeEventListener("touchmove", _, !1), document.removeEventListener("touchend", S, !1), document.body.classList.remove("vue-puzzle-overflow");
});
const O = () => {
t.mouseDown || (clearTimeout(t.timer1), b("close"));
}, E = () => {
V || (t.closeDown = !0);
}, R = () => {
t.closeDown && O(), t.closeDown = !1;
}, Y = (s) => {
t.isCanSlide && (t.mouseDown = !0, t.startWidth = z.value.clientWidth, t.newX = s.clientX || s.changedTouches[0].clientX, t.startX = s.clientX || s.changedTouches[0].clientX);
}, _ = (s) => {
t.mouseDown && (s.preventDefault(), t.newX = s.clientX || s.changedTouches[0].clientX);
}, S = () => {
t.mouseDown && (t.mouseDown = !1, q());
}, P = (s) => {
var m, g, w;
if (t.loading && !s)
return;
t.loading = !0, t.isCanSlide = !1;
const e = (m = A.value) == null ? void 0 : m.getContext("2d"), i = (g = I.value) == null ? void 0 : g.getContext("2d"), a = (w = L.value) == null ? void 0 : w.getContext("2d"), v = navigator.userAgent.indexOf("Firefox") >= 0 && navigator.userAgent.indexOf("Windows") >= 0, r = document.createElement("img");
if (e.fillStyle = "rgba(255,255,255,1)", a.fillStyle = "rgba(255,255,255,1)", e.clearRect(0, 0, o.width, o.height), i.clearRect(0, 0, o.width, o.height), t.pinX = l(h.value, o.width - h.value - 20), t.pinY = l(h.value, o.height - h.value - 20), r.crossOrigin = "anonymous", r.onload = () => {
const [c, X, B, $] = j(r);
e.save(), M(e), e.closePath(), v ? (e.clip(), e.save(), e.shadowOffsetX = 0, e.shadowOffsetY = 0, e.shadowColor = "#000", e.shadowBlur = 3, e.fill(), e.restore()) : (e.shadowOffsetX = 0, e.shadowOffsetY = 0, e.shadowColor = "#000", e.shadowBlur = 3, e.fill(), e.clip()), e.drawImage(r, c, X, B, $), a.fillRect(0, 0, o.width, o.height), a.drawImage(r, c, X, B, $), e.globalCompositeOperation = "source-atop", M(e), e.arc(
t.pinX + Math.ceil(h.value / 2),
t.pinY + Math.ceil(h.value / 2),
h.value,
0,
Math.PI * 2
), e.closePath(), e.shadowColor = "rgba(255, 255, 255, .8)", e.shadowOffsetX = -1, e.shadowOffsetY = -1, e.shadowBlur = Math.min(Math.ceil(8 * o.scale), 12);
const J = e.getImageData(
t.pinX - 3,
t.pinY - 20,
t.pinX + h.value + 5,
t.pinY + h.value + 5
);
i.putImageData(J, 0, t.pinY - 20), e.restore(), e.clearRect(0, 0, o.width, o.height), e.save(), M(e), e.globalAlpha = 0.8, e.fillStyle = "#ffffff", e.fill(), e.restore(), e.save(), e.globalCompositeOperation = "source-atop", M(e), e.arc(
t.pinX + Math.ceil(h.value / 2),
t.pinY + Math.ceil(h.value / 2),
h.value * 1.2,
0,
Math.PI * 2,
!0
), e.shadowColor = "#000", e.shadowOffsetX = 2, e.shadowOffsetY = 2, e.shadowBlur = 16, e.fill(), e.restore(), e.save(), e.globalCompositeOperation = "destination-over", e.drawImage(r, c, X, B, $), e.restore(), t.loading = !1, t.isCanSlide = !0;
}, r.onerror = () => {
P(!0);
}, !s && o.images && o.images.length) {
let c = l(0, o.images.length - 1);
c === t.imgIndex && (c === o.images.length - 1 ? c = 0 : c++), t.imgIndex = c, r.src = o.images[c];
} else
r.src = H();
}, H = () => {
const s = document.createElement("canvas"), e = s.getContext("2d"), { width: i, height: a } = o;
s.width = i, s.height = a, e.fillStyle = `rgb(${l(100, 255)},${l(100, 255)},${l(
100,
255
)})`, e.fillRect(0, 0, i, a);
for (let v = 0; v < 12; v++)
if (e.fillStyle = `rgb(${l(100, 255)},${l(100, 255)},${l(
100,
255
)})`, e.strokeStyle = `rgb(${l(100, 255)},${l(100, 255)},${l(
100,
255
)})`, l(0, 2) > 1)
e.save(), e.rotate(l(-90, 90) * Math.PI / 180), e.fillRect(
l(-20, s.width - 20),
l(-20, s.height - 20),
l(10, s.width / 2 + 10),
l(10, s.height / 2 + 10)
), e.restore();
else {
e.beginPath();
const r = l(-Math.PI, Math.PI);
e.arc(
l(0, s.width),
l(0, s.height),
l(10, s.height / 2 + 10),
r,
r + Math.PI * 1.5
), e.closePath(), e.fill();
}
return s.toDataURL("image/png");
}, M = (s) => {
const e = Math.ceil(15 * o.scale);
s.beginPath();
const { pinX: i, pinY: a } = t;
s.moveTo(i, a), s.lineTo(i + e, a), s.arcTo(
i + e,
a - e / 2,
i + e + e / 2,
a - e / 2,
e / 2
), s.arcTo(
i + e + e,
a - e / 2,
i + e + e,
a,
e / 2
), s.lineTo(i + e + e + e, a), s.lineTo(i + e + e + e, a + e), s.arcTo(
i + e + e + e + e / 2,
a + e,
i + e + e + e + e / 2,
a + e + e / 2,
e / 2
), s.arcTo(
i + e + e + e + e / 2,
a + e + e,
i + e + e + e,
a + e + e,
e / 2
), s.lineTo(i + e + e + e, a + e + e + e), s.lineTo(i, a + e + e + e), s.lineTo(i, a + e + e), s.arcTo(
i + e / 2,
a + e + e,
i + e / 2,
a + e + e / 2,
e / 2
), s.arcTo(i + e / 2, a + e, i, a + e, e / 2), s.lineTo(i, a);
}, l = (s, e) => Math.ceil(Math.random() * (e - s) + s), j = (s) => {
const { width: e, height: i } = o, a = s.width / s.height, v = e / i;
let r = 0, m = 0, g = 0, w = 0;
return a > v ? (w = i, g = a * w, m = 0, r = (e - g) / 2) : (g = e, w = g / a, r = 0, m = (i - w) / 2), [r, m, g, w];
}, q = () => {
t.isSubmting = !0;
const s = Math.abs(
t.pinX - (x.value - d.value) + (h.value - d.value) * ((x.value - d.value) / (o.width - d.value)) - 3
), { range: e, successText: i } = o;
s < e ? (t.infoText = i, t.infoBoxFail = !1, t.infoBoxShow = !0, t.isCanSlide = !1, t.isSuccess = !0, clearTimeout(t.timer1), t.timer1 = setTimeout(() => {
t.isSubmting = !1, b("success", s);
}, 800)) : (t.infoText = o.failText, t.infoBoxFail = !0, t.infoBoxShow = !0, t.isCanSlide = !1, b("fail", s), clearTimeout(t.timer1), t.timer1 = setTimeout(() => {
t.isSubmting = !1, C();
}, 800));
}, W = () => {
t.infoBoxFail = !1, t.infoBoxShow = !1, t.isCanSlide = !1, t.isSuccess = !1, t.startWidth = d.value, t.startX = 0, t.newX = 0;
}, C = () => {
t.isSubmting || (W(), P());
}, G = () => {
t.isSubmting || (W(), O());
};
return (s, e) => (k(), se(oe, {
to: o.el
}, [
n("div", {
class: p(["vue-puzzle-vcode", { show_: y.show }]),
onMousedown: E,
onMouseup: R,
onTouchstart: E,
onTouchend: R
}, [
n("div", {
class: "vue-auth-box_",
style: f({ padding: `${o.padding}px` }),
onMousedown: e[2] || (e[2] = F(() => {
}, ["stop"])),
onTouchstart: e[3] || (e[3] = F(() => {
}, ["stop"]))
}, [
n("div", {
class: "auth-body_",
style: f(`height: ${o.height}px`)
}, [
n("canvas", {
ref_key: "refC1",
ref: A,
width: o.width,
height: o.height,
style: f(`width:${o.width}px;height:${o.height}px`)
}, null, 12, ie),
n("canvas", {
ref_key: "refC3",
ref: L,
class: p(["auth-canvas3_", { show: t.isSuccess }]),
width: o.width,
height: o.height,
style: f(`width:${o.width}px;height:${o.height}px`)
}, null, 14, ae),
n("canvas", {
width: u(h),
class: "auth-canvas2_",
height: o.height,
ref_key: "refC2",
ref: I,
style: f(`width:${u(h)}px;height:${o.height}px;transform:translateX(${u(x) - u(d) - (u(h) - u(d)) * ((u(x) - u(d)) / (o.width - u(d)))}px)`)
}, null, 12, ne),
n("div", {
class: p(["loading-box_", { hide_: !t.loading }])
}, he, 2),
n("div", {
class: p([
"info-box_",
{ show: t.infoBoxShow },
{ fail: t.infoBoxFail }
])
}, U(t.infoText), 3),
n("div", {
class: p(["flash_", { show: t.isSuccess }]),
style: f(`transform: translateX(${t.isSuccess ? `${o.width + o.height * 0.578}px` : `-${o.height * 0.578}px`}) skew(-30deg, 0);`)
}, null, 6),
n("div", null, [
(k(), N("svg", {
onClick: C,
t: "1711695060046",
class: "icon reset_",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "7291",
width: "200",
height: "200"
}, ue))
]),
(k(), N("svg", {
onClick: G,
t: "1711695359414",
class: "icon reset_ close",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "7449",
width: "200",
height: "200"
}, ge))
], 4),
n("div", we, [
n("div", {
class: "range-box",
style: f(`height:${u(d)}px`)
}, [
n("div", ve, U(y.sliderText), 1),
n("div", {
class: "range-slider",
ref_key: "refRangeSlider",
ref: z,
style: f(`width:${u(x)}px`)
}, [
n("div", {
class: p(["range-btn", { isDown: t.mouseDown }]),
style: f(`width:${u(d)}px`),
onMousedown: e[0] || (e[0] = (i) => Y(i)),
onTouchstart: e[1] || (e[1] = (i) => Y(i))
}, _e, 38)
], 4)
], 4)
])
], 36)
], 34)
], 8, ["to"]));
}
});
export {
Me as default
};