iking-countto
Version:
金合前端组件
226 lines (225 loc) • 7.02 kB
JavaScript
import { ref as S, getCurrentScope as U, onScopeDispose as W, unref as m, computed as I, watch as z, defineComponent as X, watchEffect as j, onMounted as H, openBlock as L, createElementBlock as $, normalizeStyle as q, normalizeClass as K, toDisplayString as J } from "vue";
var P;
const w = typeof window < "u", Y = (e) => typeof e == "function", E = (e) => typeof e == "number", Z = (e, o, t) => Math.min(t, Math.max(o, e)), Q = () => {
};
w && ((P = window == null ? void 0 : window.navigator) == null ? void 0 : P.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
function ee(e) {
return typeof e == "function" ? e() : m(e);
}
function G(e) {
return e;
}
function M(e) {
return U() ? (W(e), !0) : !1;
}
function te(e, o, t = {}) {
const {
immediate: r = !0
} = t, u = S(!1);
let s = null;
function f() {
s && (clearTimeout(s), s = null);
}
function l() {
u.value = !1, f();
}
function d(...p) {
f(), u.value = !0, s = setTimeout(() => {
u.value = !1, s = null, e(...p);
}, ee(o));
}
return r && (u.value = !0, w && d()), M(l), {
isPending: u,
start: d,
stop: l
};
}
const ne = w ? window : void 0;
w && window.document;
w && window.navigator;
w && window.location;
const N = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, x = "__vueuse_ssr_handlers__";
N[x] = N[x] || {};
N[x];
function ae(e, o = {}) {
const {
immediate: t = !0,
window: r = ne
} = o, u = S(!1);
let s = null;
function f() {
!u.value || !r || (e(), s = r.requestAnimationFrame(f));
}
function l() {
!u.value && r && (u.value = !0, f());
}
function d() {
u.value = !1, s != null && r && (r.cancelAnimationFrame(s), s = null);
}
return t && l(), M(d), {
isActive: u,
pause: d,
resume: l
};
}
var B;
(function(e) {
e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
})(B || (B = {}));
var oe = Object.defineProperty, A = Object.getOwnPropertySymbols, re = Object.prototype.hasOwnProperty, ue = Object.prototype.propertyIsEnumerable, k = (e, o, t) => o in e ? oe(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, se = (e, o) => {
for (var t in o || (o = {}))
re.call(o, t) && k(e, t, o[t]);
if (A)
for (var t of A(o))
ue.call(o, t) && k(e, t, o[t]);
return e;
};
const ie = {
easeInSine: [0.12, 0, 0.39, 0],
easeOutSine: [0.61, 1, 0.88, 1],
easeInOutSine: [0.37, 0, 0.63, 1],
easeInQuad: [0.11, 0, 0.5, 0],
easeOutQuad: [0.5, 1, 0.89, 1],
easeInOutQuad: [0.45, 0, 0.55, 1],
easeInCubic: [0.32, 0, 0.67, 0],
easeOutCubic: [0.33, 1, 0.68, 1],
easeInOutCubic: [0.65, 0, 0.35, 1],
easeInQuart: [0.5, 0, 0.75, 0],
easeOutQuart: [0.25, 1, 0.5, 1],
easeInOutQuart: [0.76, 0, 0.24, 1],
easeInQuint: [0.64, 0, 0.78, 0],
easeOutQuint: [0.22, 1, 0.36, 1],
easeInOutQuint: [0.83, 0, 0.17, 1],
easeInExpo: [0.7, 0, 0.84, 0],
easeOutExpo: [0.16, 1, 0.3, 1],
easeInOutExpo: [0.87, 0, 0.13, 1],
easeInCirc: [0.55, 0, 1, 0.45],
easeOutCirc: [0, 0.55, 0.45, 1],
easeInOutCirc: [0.85, 0, 0.15, 1],
easeInBack: [0.36, 0, 0.66, -0.56],
easeOutBack: [0.34, 1.56, 0.64, 1],
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
}, le = se({
linear: G
}, ie);
function ce([e, o, t, r]) {
const u = (n, a) => 1 - 3 * a + 3 * n, s = (n, a) => 3 * a - 6 * n, f = (n) => 3 * n, l = (n, a, i) => ((u(a, i) * n + s(a, i)) * n + f(a)) * n, d = (n, a, i) => 3 * u(a, i) * n * n + 2 * s(a, i) * n + f(a), p = (n) => {
let a = n;
for (let i = 0; i < 4; ++i) {
const v = d(a, e, t);
if (v === 0)
return a;
a -= (l(a, e, t) - n) / v;
}
return a;
};
return (n) => e === o && t === r ? n : l(p(n), o, r);
}
function D(e, o = {}) {
const {
delay: t = 0,
disabled: r = !1,
duration: u = 1e3,
onFinished: s = Q,
onStarted: f = Q,
transition: l = G
} = o, d = I(() => {
const c = m(l);
return Y(c) ? c : ce(c);
}), p = I(() => {
const c = m(e);
return E(c) ? c : c.map(m);
}), n = I(() => E(p.value) ? [p.value] : p.value), a = S(n.value.slice(0));
let i, v, O, h, y;
const { resume: g, pause: T } = ae(() => {
const c = Date.now(), b = Z(1 - (O - c) / i, 0, 1);
a.value = y.map((C, V) => {
var F;
return C + ((F = v[V]) != null ? F : 0) * d.value(b);
}), b >= 1 && (T(), s());
}, { immediate: !1 }), _ = () => {
T(), i = m(u), v = a.value.map((c, b) => {
var C, V;
return ((C = n.value[b]) != null ? C : 0) - ((V = a.value[b]) != null ? V : 0);
}), y = a.value.slice(0), h = Date.now(), O = h + i, g(), f();
}, R = te(_, t, { immediate: !1 });
return z(n, () => {
m(r) ? a.value = n.value.slice(0) : m(t) <= 0 ? _() : R.start();
}, { deep: !0 }), I(() => {
const c = m(r) ? n : a;
return E(p.value) ? c.value[0] : c.value;
});
}
const fe = /* @__PURE__ */ X({
__name: "IkingCountTo",
props: {
startVal: { type: Number, default: 0 },
endVal: { type: Number, default: 2022 },
duration: { type: Number, default: 1500 },
autoplay: { type: Boolean, default: !0 },
decimals: {
type: Number,
default: 0,
validator(e) {
return e >= 0;
}
},
prefix: { type: String, default: "" },
suffix: { type: String, default: "" },
separator: { type: String, default: "," },
decimal: { type: String, default: "." },
color: { type: String },
useEasing: { type: Boolean, default: !0 },
transition: { type: String, default: "linear" },
customClass: { type: String }
},
emits: ["onFinished", "onStarted"],
setup(e, { emit: o }) {
const t = e, r = S(t.startVal);
j(() => {
r.value = t.startVal;
}), z([() => t.startVal, () => t.endVal], () => {
t.autoplay && l();
});
const u = S(!1);
let s = D(r);
const f = I(() => p(m(s)));
function l() {
d(), r.value = t.endVal;
}
function d() {
s = D(r, {
disabled: u,
duration: t.duration,
onFinished: () => o("onFinished"),
onStarted: () => o("onStarted"),
...t.useEasing ? { transition: le[t.transition] } : {}
});
}
const p = (n) => {
if (!n && n !== 0)
return "";
const { decimals: a, decimal: i, separator: v, suffix: O, prefix: h } = t;
n = Number(n).toFixed(a), n += "";
const y = n.split(".");
let g = y[0];
const T = y.length > 1 ? i + y[1] : "", _ = /(\d+)(\d{3})/;
if (v && typeof v != "number")
for (; _.test(g); )
g = g.replace(_, "$1" + v + "$2");
return h + g + T + O;
};
return H(() => {
t.autoplay && l();
}), (n, a) => (L(), $("span", {
style: q({ color: e.color }),
class: K({ customClass: e.customClass })
}, J(m(f)), 7));
}
}), pe = (e) => {
e.component("IkingCountTo", fe);
};
export {
fe as default,
pe as install
};