uv-ui
Version:
基于vue3的移动端组件库
218 lines (217 loc) • 7.51 kB
JavaScript
import { ref as a, onMounted as q, watch as z, openBlock as j, createElementBlock as A, normalizeStyle as y, createElementVNode as u, normalizeClass as W, toDisplayString as x } from "vue";
import "./slider-vertify.vue_vue_type_style_index_0_lang.js";
const G = ["width", "height"], H = ["width", "height"], J = /* @__PURE__ */ u("div", { class: "uv-slider-vertify-slider-icon" }, " \u2192 ", -1), K = [
J
], Q = { class: "uv-slider-vertify-slider-text" }, Z = /* @__PURE__ */ u("div", { class: "uv-slider-vertify-loading-icon" }, null, -1), ee = /* @__PURE__ */ u("span", null, "\u52A0\u8F7D\u4E2D...", -1), te = [
Z,
ee
], ne = {
name: "UvSliderVertify"
}, oe = /* @__PURE__ */ Object.assign(ne, {
props: {
width: {
type: Number,
default: 320
},
height: {
type: Number,
default: 160
},
visible: {
type: Boolean,
default: !0
},
refreshIcon: {
type: String,
default: "http://cdn.dooring.cn/dr/icon12.png"
},
l: {
type: Number,
default: 42
},
r: {
type: Number,
default: 9
},
imgUrl: {
type: String,
default: ""
},
text: {
type: String,
default: ""
},
onDraw: {
type: Function,
default: (o) => {
}
},
onCustomVertify: {
type: Function,
default: (o) => o
},
onBeforeRefresh: {
type: Function,
default: () => {
}
},
onSuccess: {
type: Function,
default: () => {
}
},
onFail: {
type: Function,
default: () => {
}
},
onRefresh: {
type: Function,
default: () => {
}
}
},
setup(o) {
const r = o, m = a(!1), p = a(0), v = a("uv-slider-vertify-container"), D = a(r.text), I = a(null), c = a(null), C = a(null), w = a(!1), F = a([]), M = a(0), Y = a(0), d = a(0), b = a(0), f = Math.PI, h = r.l + r.r * 2 + 3;
function T(e, t) {
return Math.round(Math.random() * (t - e) + e);
}
function B(e, t) {
return e + t;
}
function V(e) {
return e * e;
}
const N = (e, t, n, s) => {
const { l, r: i } = r;
e.beginPath(), e.moveTo(t, n), e.arc(t + l / 2, n - i + 2, i, 0.72 * f, 2.26 * f), e.lineTo(t + l, n), e.arc(t + l + i - 2, n + l / 2, i, 1.21 * f, 2.78 * f), e.lineTo(t + l, n + l), e.lineTo(t, n + l), e.arc(t + i - 2, n + l / 2, i + 0.4, 2.76 * f, 1.24 * f, !0), e.lineTo(t, n), e.lineWidth = 1, e.fillStyle = "rgba(255, 255, 255, 0.7)", e.strokeStyle = "rgba(255, 255, 255, 0.7)", e.stroke(), e.globalCompositeOperation = "destination-over", s === "fill" ? e.fill() : e.clip();
}, X = () => {
const { imgUrl: e, width: t, height: n } = r;
return e || `https://picsum.photos/id/${T(0, 1084)}/${t}/${n}`;
}, $ = (e) => {
const t = new Image();
return t.crossOrigin = "Anonymous", t.onload = e, t.onerror = () => {
t.setSrc(X());
}, t.setSrc = (n) => {
t.src = n;
}, t.setSrc(X()), t;
}, O = (e) => {
const { width: t, height: n, r: s } = r, l = I.value.getContext("2d"), i = c.value.getContext("2d");
d.value = T(h + 10, t - (h + 10)), b.value = T(10 + s * 2, n - (h + 10)), N(l, d.value, b.value, "fill"), N(i, d.value, b.value, "clip"), l.drawImage(e, 0, 0, t, n), i.drawImage(e, 0, 0, t, n);
const g = b.value - s * 2 - 1, k = i.getImageData(d.value - 3, g, h, h);
c.value.width = h, i.putImageData(k, 0, g);
}, _ = () => {
const e = $(() => {
m.value = !1, O(e);
});
C.value = e;
}, R = () => {
const { width: e, height: t, onBeforeRefresh: n } = r, s = I.value.getContext("2d"), l = c.value.getContext("2d");
p.value = 0, v.value = "uv-slider-vertify-container", c.value.width = e, c.value.style.left = 0 + "px", s.clearRect(0, 0, e, t), l.clearRect(0, 0, e, t), n && n(), m.value = !0, C.value.setSrc(X());
}, U = () => {
const { onRefresh: e } = r;
R(), typeof e == "function" && e();
}, E = () => {
const e = F.value, t = e.reduce(B) / e.length, n = e.map((i) => i - t), s = Math.sqrt(n.map(V).reduce(B) / e.length), l = parseInt(c.value.style.left);
return {
spliced: Math.abs(l - d.value) < 10,
verified: s !== 0,
left: l,
destX: d.value
};
}, S = function(e) {
M.value = e.clientX || e.touches[0].clientX, Y.value = e.clientY || e.touches[0].clientY, w.value = !0;
}, L = (e) => {
const { width: t, onDraw: n } = r;
if (!w.value)
return !1;
e.preventDefault();
const s = e.clientX || e.touches[0].clientX, l = e.clientY || e.touches[0].clientY, i = s - M.value, g = l - Y.value;
if (i < 0 || i + 38 >= t)
return !1;
p.value = i;
const k = (t - 40 - 20) / (t - 40) * i;
c.value.style.left = k + "px", v.value = "uv-slider-vertify-container uv-slider-vertify-container-active", F.value.push(g), n && n(k);
}, P = (e) => {
const { onCustomVertify: t, onSuccess: n, onFail: s } = r;
if (!w.value || (w.value = !1, (e.clientX || e.changedTouches[0].clientX) === M.value))
return !1;
v.value = "uv-slider-vertify-container";
const { spliced: i, verified: g } = t ? t(E()) : E();
i ? g ? (v.value = "uv-slider-vertify-container uv-slider-vertify-container-success", typeof n == "function" && n()) : (v.value = "uv-slider-vertify-container uv-slider-vertify-container-fail", D.value = "\u8BF7\u518D\u8BD5\u4E00\u6B21", R()) : (v.value = "uv-slider-vertify-container uv-slider-vertify-container-fail", typeof s == "function" && s(), setTimeout(R.bind(this), 1e3));
};
return q(() => {
_();
}), z(
() => r.visible,
() => {
r.visible && (C.value ? R() : _());
}
), (e, t) => (j(), A("div", {
class: "uv-slider-vertify",
style: y({
width: o.width + "px",
margin: "0 auto",
display: o.visible ? "" : "none"
}),
onMousemove: L,
onMouseup: P,
onTouchmove: L,
onTouchend: P
}, [
u("div", null, [
u("canvas", {
ref_key: "canvasRef",
ref: I,
width: o.width,
height: o.height
}, null, 8, G),
u("canvas", {
ref_key: "blockRef",
ref: c,
class: "uv-slider-vertify-block",
width: o.width,
height: o.height,
onMousedown: S,
onTouchstart: S
}, null, 40, H)
]),
u("div", {
class: W(v.value),
style: y({
pointerEvents: m.value ? "none" : "auto",
width: o.width + "px"
})
}, [
u("div", {
class: "uv-slider-vertify-slider-mask",
style: y({ width: p.value + "px" })
}, [
u("div", {
class: "uv-slider-vertify-slider",
style: y({ left: p.value + "px" }),
onMousedown: S,
onTouchstart: S
}, K, 36)
], 4),
u("div", Q, x(D.value), 1)
], 6),
u("div", {
class: "uv-slider-vertify-refresh-icon",
onClick: U,
style: y({ backgroundImage: `url(${o.refreshIcon})` })
}, null, 4),
u("div", {
class: "uv-slider-vertify-loading-container",
style: y({
width: o.width + "px",
height: o.height + "px",
display: m.value ? "" : "none"
})
}, te, 4)
], 36));
}
});
export {
oe as default
};