vue-clock-lonlyape-v3
Version:
a clock component for vue3
298 lines (297 loc) • 10.2 kB
JavaScript
import { defineComponent as J, computed as H, ref as b, onBeforeMount as X, nextTick as q, watch as T, openBlock as G, createElementBlock as K, normalizeStyle as Q, createElementVNode as U } from "vue";
const A = /* @__PURE__ */ J({
__name: "clock",
props: {
option: {},
width: {},
height: {},
adaptive: { type: Boolean },
timezone: {},
time: {},
border: {},
background: {},
dial: {},
number: {},
needle: {}
},
emits: ["timeChange"],
setup(m, { emit: B }) {
const v = {
adaptive: !0,
timezone: "",
time: {
isStatic: !1,
timestamp: 0
},
border: {
type: "circle",
//边界类型（圆、四边形）;circle(圆形) 、 rectangle(四边形)
width: 300,
height: 300,
lineWidth: 2,
color: "#bbb"
},
background: {
color: "",
image: ""
},
dial: {
isDial: !0,
//是否要刻度
distance: 0,
//刻度与边界的距离
maxLength: 8,
minLength: 5,
maxWidth: 3,
minWidth: 2,
color: "#888"
},
number: {
isNumber: !0,
//是否要数字
type: "arabic",
//数字类型，罗马：“roman”；阿拉伯：“arabic”（默认）
color: "#777",
fontSize: "19px",
fontWeight: "normal",
fontFamily: "微软雅黑",
radius: 125
},
needle: {
second: {
length: 110,
color: "#aaa",
lineWidth: 3,
longOut: 5
},
minute: {
length: 100,
color: "#999",
lineWidth: 4,
longOut: 5
},
hour: {
length: 70,
color: "#888",
lineWidth: 4,
longOut: 5
}
}
}, D = B, k = m, l = H(() => {
var h, f, I, z, M, N;
let e = {
...k
};
Object.keys(e).forEach((P) => {
e[P] === void 0 && delete e[P];
});
var a = {
...v.time,
...e.time
}, t = {
...v.border,
...e.border
}, r = {
...v.background,
...e.background
}, i = {
...v.dial,
...e.dial
}, o = {
...v.number,
...e.number
}, u = {
second: {
...(h = v.needle) == null ? void 0 : h.second,
...(f = e.needle) == null ? void 0 : f.second
},
minute: {
...(I = v.needle) == null ? void 0 : I.minute,
...(z = e.needle) == null ? void 0 : z.minute
},
hour: {
...(M = v.needle) == null ? void 0 : M.hour,
...(N = e.needle) == null ? void 0 : N.hour
}
};
return {
...k,
time: a,
border: t,
background: r,
dial: i,
number: o,
needle: u
};
}), w = b(), d = b(), c = b();
var n = {}, x = {}, p = {};
const O = b({});
X(() => {
q(() => {
n = d.value.getContext("2d"), S(), W(), l.value.time.isStatic || (x = setInterval(W, 1e3)), g(), setTimeout(_, 100);
});
}), T(l, () => {
l.value.time.isStatic && clearInterval(x), g();
}, { deep: !0 }), T(c, g);
function _() {
const e = JSON.parse(JSON.stringify(l.value)), a = e.border.width;
var t = new ResizeObserver((r) => {
r.forEach((i) => {
let o = i.contentRect, u = l.value;
y(u, e, o.width - 6, a), S(), g();
});
});
t.observe(w.value);
}
function y(e, a, t, r) {
if (l.value.adaptive)
for (let i in e) {
let o = e[i], u = a[i], h = t / r < 1 ? t / r : 1;
typeof o == "number" ? e[i] = u * h : typeof o == "object" ? y(o, u, t, r) : i == "fontSize" && (e[i] = u.replace(/^\d*/, (f) => f * h));
}
}
function g() {
var e, a, t;
C(), y(l.value, l.value, ((e = d.value) == null ? void 0 : e.width) - 6, ((t = (a = l.value) == null ? void 0 : a.border) == null ? void 0 : t.width) || 1), L(), R(), V(), E(), j();
}
function C() {
n == null || n.clearRect(0, 0, d.value.width, d.value.width);
}
function S() {
var e = {};
l.value.width && (/%$/.test(l.value.width) ? e.width = l.value.width : e.width = Number(l.value.width) + "px"), l.value.height ? /%$/.test(l.value.height) ? e.height = l.value.height : e.height = Number(l.value.height) + "px" : e.height = "600px", O.value = e, d.value.width = e.width ? Number(e.width.split("px")[0]) : w.value.clientWidth, d.value.height = Number(e.height.split("px")[0]);
}
function R() {
n.save(), n.translate(d.value.width / 2, d.value.height / 2), n.beginPath();
let e = l.value.border.width, a = l.value.border.height;
l.value.border.type == "rectangle" ? n.rect(-e / 2, -a / 2, e, a) : n.arc(0, 0, e / 2, 0, Math.PI * 2, !0), n.closePath(), n.strokeStyle = l.value.border.color, n.lineWidth = l.value.border.lineWidth, n.stroke(), n.restore();
}
function L() {
n.save(), n.beginPath(), n.translate(d.value.width / 2, d.value.height / 2);
let e = l.value.border.width, a = l.value.border.height;
var t, r;
if (l.value.border.type == "rectangle" ? (n.rect(-e / 2, -a / 2, e, a), t = -e / 2, r = -a / 2) : (n.arc(0, 0, e / 2, 0, Math.PI * 2, !0), t = -e / 2, r = -e / 2), l.value.background.color && (n.fillStyle = l.value.background.color, n.fill()), l.value.background.image) {
var i = new Image();
p.bgImg ? i = p.bgImg : (i.src = l.value.background.image, i.onload = function() {
console.log("img loaded"), p.bgImg = i;
});
var o, u, h;
i.width >= i.height ? (o = (i.width - i.height) / 2, u = 0, h = i.height) : (o = 0, u = (i.height - i.width) / 2, h = i.width), n.clip(), n.drawImage(i, o, u, h, h, t, r, -t * 2, -r * 2);
}
n.closePath(), n.restore();
}
function V() {
if (l.value.dial.isDial) {
var e = Math.PI * 2 / 60, a = 0, t = l.value.border || {}, r = l.value.dial || {}, i = l.value.dial.distance ? l.value.dial.distance + t.lineWidth / 2 : t.lineWidth / 2;
l.value.dial.distance == 0 && (i = t.lineWidth / 2);
var o = {
x: 0,
y: t.width / 2 - i
};
for (let u = 0; u < 60; u++)
a = e * u, n.save(), n.translate(d.value.width / 2, d.value.height / 2), u % 5 == 0 ? s(o, a, r.maxLength - o.y, r.color, r.maxWidth) : s(o, a, r.minLength - o.y, r.color, r.minWidth), n.restore();
}
}
function E() {
if (l.value.number.isNumber) {
var e = [];
for (let t = 1; t < 13; t++)
e[t - 1] = t + 3, t + 3 > 12 && (e[t - 1] = 3 - (12 - t));
if (l.value.number.type == "roman")
for (let t = 0; t < 12; t++)
e[t] = $(e[t]);
var a = Math.PI / 6;
n.save(), n.fillStyle = l.value.number.color, n.font = l.value.number.fontWeight + " " + l.value.number.fontSize + " " + l.value.number.fontFamily, n.textBaseline = "middle", n.textAlign = "center", n.translate(d.value.width / 2, d.value.height / 2);
for (let t = 0; t < e.length; t++)
n.fillText(e[t], (l.value.number.radius || 1) * Math.cos(a * (t + 1)), (l.value.number.radius || 1) * Math.sin(a * (t + 1)));
n.restore();
}
}
function $(e) {
var a = ["I", "V", "X", "L", "C", "D", "M"], t = e.toString().split("");
for (let i = 0; i < t.length; i++) {
var r = Number(t[t.length - 1 - i]);
if (t[t.length - 1 - i] = "", r >= 5 && r < 9) {
t[t.length - 1 - i] = a[2 * i + 1];
for (let o = 0; o < r - 5; o++)
t[t.length - 1 - i] += a[2 * i];
} else if (r == 9)
t[t.length - 1 - i] = a[2 * i] + a[2 * i + 2];
else if (r == 4)
t[t.length - 1 - i] = a[2 * i] + a[2 * i + 1];
else
for (let o = 0; o < r; o++)
t[t.length - 1 - i] += a[2 * i];
}
return t.join("");
}
function j() {
var e = c.value.hAngle, a = c.value.mAngle, t = c.value.sAngle;
n.save(), n.translate(d.value.width / 2, d.value.height / 2), s(
{
x: 0,
y: l.value.needle.hour.longOut
},
e,
l.value.needle.hour.length,
l.value.needle.hour.color,
l.value.needle.hour.lineWidth
), s(
{
x: 0,
y: l.value.needle.minute.longOut
},
a,
l.value.needle.minute.length,
l.value.needle.minute.color,
l.value.needle.minute.lineWidth
), s(
{
x: 0,
y: l.value.needle.second.longOut
},
t,
l.value.needle.second.length,
l.value.needle.second.color,
l.value.needle.second.lineWidth
), n.restore();
}
function F() {
let e = l.value.time.timestamp || (/* @__PURE__ */ new Date()).getTime();
var a = l.value.time.isStatic ? new Date(e) : /* @__PURE__ */ new Date(), t = a.getTime(), r;
l.value.timezone === void 0 || l.value.timezone === "" ? r = -a.getTimezoneOffset() / 60 : r = Number(l.value.timezone);
var i = a.getTimezoneOffset() * 6e4, o = t + i;
return new Date(o + 36e5 * r);
}
function W() {
var e = F(), a = e.getHours(), t = e.getMinutes(), r = e.getSeconds(), i = Math.PI * 2 * (r % 60) / 60, o = Math.PI * 2 * (t % 60) / 60 + i / 60, u = Math.PI * 2 * (a % 12) / 12 + o / 12;
c.value = {
sAngle: i,
mAngle: o,
hAngle: u
}, D("timeChange", e);
}
function s(e, a, t, r, i) {
n.save(), n.beginPath(), n.rotate(a), n.moveTo(e.x, e.y), n.lineTo(0, -t), n.strokeStyle = r, n.lineWidth = i, n.stroke(), n.restore();
}
return (e, a) => (G(), K("div", {
ref_key: "$el",
ref: w,
class: "lonlyape-clock",
style: Q(O.value)
}, [
U("canvas", {
ref_key: "canvas",
ref: d
}, null, 512)
], 4));
}
}), Z = A, ee = {
install(m) {
console.log(m), m.component("clock", A);
}
};
export {
Z as clock,
ee as default
};