uv-ui
Version:
基于vue3的移动端组件库
140 lines (139 loc) • 4.03 kB
JavaScript
import { reactive as x, computed as D, watch as y, onMounted as A, onUnmounted as N, openBlock as T, createElementBlock as h, normalizeStyle as k, toDisplayString as B } from "vue";
import { useRequestAnimationFrame as v } from "../../hooks/useRequestAnimationFrame.js";
import "../../hooks/useCountDown.js";
const z = {
name: "UvCountTo"
}, C = /* @__PURE__ */ Object.assign(z, {
props: {
start: {
type: Number,
required: !1,
default: 0
},
end: {
type: Number,
required: !1,
default: 0
},
duration: {
type: Number,
required: !1,
default: 5e3
},
autoPlay: {
type: Boolean,
required: !1,
default: !0
},
decimals: {
type: Number,
required: !1,
default: 0,
validator(r) {
return r >= 0;
}
},
decimal: {
type: String,
required: !1,
default: "."
},
separator: {
type: String,
required: !1,
default: ","
},
prefix: {
type: String,
required: !1,
default: ""
},
suffix: {
type: String,
required: !1,
default: ""
},
useEasing: {
type: Boolean,
required: !1,
default: !0
},
easingFn: {
type: Function,
default(r, i, n, e) {
return n * (-Math.pow(2, -10 * r / e) + 1) * 1024 / 1023 + i;
}
},
fontSize: {
type: String
},
bold: {
type: Boolean,
default: !1
},
color: {
type: String
}
},
emits: ["onMountedcallback", "callback"],
setup(r, { expose: i, emit: n }) {
const e = r, { requestAnimationFrame: s, cancelAnimationFrame: u } = v(), S = (a) => !isNaN(parseFloat(a)), c = (a) => {
a = a.toFixed(e.default), a += "";
const l = a.split(".");
let o = l[0];
const q = l.length > 1 ? e.decimal + l[1] : "", m = /(\d+)(\d{3})/;
if (e.separator && !S(e.separator))
for (; m.test(o); )
o = o.replace(m, "$1" + e.separator + "$2");
return e.prefix + o + q + e.suffix;
}, t = x({
localStart: e.start,
displayValue: c(e.start),
printVal: null,
paused: !1,
localDuration: e.duration,
startTime: null,
timestamp: null,
remaining: null,
rAF: null
}), d = D(() => e.start > e.end), p = () => {
t.localStart = e.start, t.startTime = null, t.localDuration = e.duration, t.paused = !1, t.rAF = s(f);
};
y(() => e.start, () => {
e.autoPlay && p();
}), y(() => e.end, () => {
e.autoPlay && p();
}), A(() => {
e.autoPlay && p(), n("onMountedcallback");
});
const g = () => {
u(t.rAF);
}, V = () => {
t.startTime = null, t.localDuration = +t.remaining, t.localStart = +t.printVal, s(f);
}, F = () => {
t.paused ? (V(), t.paused = !1) : (g(), t.paused = !0);
}, b = () => {
t.startTime = null, u(t.rAF), t.displayValue = c(e.start);
}, f = (a) => {
t.startTime || (t.startTime = a), t.timestamp = a;
const l = a - t.startTime;
t.remaining = t.localDuration - l, e.useEasing ? d.value ? t.printVal = t.localStart - e.easingFn(l, 0, t.localStart - e.end, t.localDuration) : t.printVal = e.easingFn(l, t.localStart, e.end - t.localStart, t.localDuration) : d.value ? t.printVal = t.localStart - (t.localStart - e.end) * (l / t.localDuration) : t.printVal = t.localStart + (e.end - t.localStart) * (l / t.localDuration), d.value ? t.printVal = t.printVal < e.end ? e.end : t.printVal : t.printVal = t.printVal > e.end ? e.end : t.printVal, t.displayValue = c(t.printVal), l < t.localDuration ? t.rAF = s(f) : n("callback");
};
return N(() => {
u(t.rAF);
}), i({
pauseResume: F,
reset: b
}), (a, l) => (T(), h("span", {
class: "uv-count-to",
style: k({
fontSize: r.fontSize,
fontWeight: r.bold ? "700" : "500",
color: r.color
})
}, B(t.displayValue), 5));
}
});
export {
C as default
};