uv-ui
Version:
基于vue3的移动端组件库
268 lines (267 loc) • 7.63 kB
JavaScript
import { ref as f, reactive as j, onMounted as A, openBlock as u, createElementBlock as d, createElementVNode as n, createVNode as b, unref as F, toDisplayString as i, Fragment as _, renderList as S, normalizeClass as J } from "vue";
import w from "../icon/index.js";
import "./calendar.vue_vue_type_style_index_0_lang.js";
const V = { class: "uv-calendar" }, E = { class: "uv-calendar-header" }, L = { class: "uv-calendar-header-action" }, Y = { class: "uv-calendar-title" }, z = { class: "uv-calendar-header-week" }, R = { class: "uv-calendar-content" }, $ = ["onClick"], B = {
name: "UvCalendar"
}, W = /* @__PURE__ */ Object.assign(B, {
props: {
modelValue: {
type: Date
}
},
emits: ["update:modelValue"],
setup(M, { emit: x }) {
const T = M, k = 1900, C = 9999, l = f(T.modelValue), h = {
chineseFullName: [
"\u4E00\u6708",
"\u4E8C\u6708",
"\u4E09\u6708",
"\u56DB\u6708",
"\u4E94\u6708",
"\u516D\u6708",
"\u4E03\u6708",
"\u516B\u6708",
"\u4E5D\u6708",
"\u5341\u6708",
"\u5341\u4E00\u6708",
"\u5341\u4E8C\u6708"
],
fullName: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
mmm: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
}, y = [
{
chineseFullName: "\u5468\u65E5",
chineseShortName: "\u65E5",
fullName: "Sunday",
shortName: "Sun",
dayNumber: 0
},
{
chineseFullName: "\u5468\u4E00",
chineseShortName: "\u4E00",
fullName: "Monday",
shortName: "Mon",
dayNumber: 1
},
{
chineseFullName: "\u5468\u4E8C",
chineseShortName: "\u4E8C",
fullName: "Tuesday",
shortName: "Tue",
dayNumber: 2
},
{
chineseFullName: "\u5468\u4E09",
chineseShortName: "\u4E09",
fullName: "Wednesday",
shortName: "Wed",
dayNumber: 3
},
{
chineseFullName: "\u5468\u56DB",
chineseShortName: "\u56DB",
fullName: "Thursday",
shortName: "Thu",
dayNumber: 4
},
{
chineseFullName: "\u5468\u4E94",
chineseShortName: "\u4E94",
fullName: "Friday",
shortName: "Fri",
dayNumber: 5
},
{
chineseFullName: "\u5468\u516D",
chineseShortName: "\u516D",
fullName: "Saturday",
shortName: "Sat",
dayNumber: 6
}
], I = new Date(), e = j({
target: {
year: null,
month: null,
date: null,
day: null,
monthShortName: null,
monthFullName: null,
monthChineseFullName: null,
firstDay: null,
firstDayIndex: null,
totalDays: null
},
previous: {
totalDays: null
}
}), c = f([]);
function N() {
if (l.value || (l.value = I), e.target.year = l.value.getFullYear(), e.target.month = l.value.getMonth(), e.target.date = l.value.getDate(), e.target.day = l.value.getDay(), e.target.year < k || e.target.year > C) {
console.error("\u65E0\u6548\u7684\u5E74\u4EFD\uFF0C\u8BF7\u68C0\u67E5\u4F20\u5165\u7684\u6570\u636E\u662F\u5426\u662F\u6B63\u5E38");
return;
}
let r = "";
r = l.value.toString().split(" "), e.target.monthShortName = r[1], e.target.monthFullName = h.fullName[e.target.month], e.target.monthChineseFullName = h.chineseFullName[e.target.month];
const t = new Date(
e.target.year,
e.target.month,
1
);
e.target.firstDay = t.getDay(), e.target.firstDayIndex = y.findIndex(
(o) => o.dayNumber === e.target.firstDay
);
const a = new Date(
e.target.year,
e.target.month + 1,
0
);
e.target.totalDays = a.getDate();
const s = new Date(
e.target.year,
e.target.month,
0
);
e.previous.totalDays = s.getDate();
}
function g() {
let r, t = 1;
const a = [], s = [];
for (r = 0; r <= 6; r++)
if (r < e.target.firstDayIndex) {
const o = e.previous.totalDays - e.target.firstDayIndex + (r + 1);
s.push({
dateObj: new Date(
e.target.year,
e.target.month - 1,
o
),
dateNumber: o,
dateType: "previous"
});
} else
s.push({
dateObj: new Date(
e.target.year,
e.target.month,
t
),
dateNumber: t,
dateType: "current"
}), t++;
a.push(...s);
for (let o = 0; o <= 4; o++) {
const m = [];
for (let p = 0; p <= 6; p++) {
if (t <= e.target.totalDays)
m.push({
dateObj: new Date(
e.target.year,
e.target.month,
t
),
dateNumber: t,
dateType: "current"
});
else {
const D = t - e.target.totalDays;
m.push({
dateObj: new Date(
e.target.year,
e.target.month + 1,
D
),
dateNumber: D,
dateType: "next"
});
}
t++;
}
a.push(...m);
}
c.value = a;
}
function v(r) {
let t = e.target.month + r, a = e.target.year;
t > 11 ? (t = 0, a += 1) : t < 0 && (t = 11, a -= 1), l.value = new Date(a, t, 1), N(), g();
}
function O(r) {
["previous", "next"].includes(r.dateType) || (console.log(r), e.target.date = r.dateNumber, x("update:modelValue", r.dateObj));
}
return A(() => {
N(), g(), console.log(e), console.log(c.value);
}), (r, t) => (u(), d("div", V, [
n("div", E, [
n("div", L, [
n("div", {
class: "uv-calendar-pre",
onClick: t[0] || (t[0] = (a) => v(-1))
}, [
b(F(w), {
size: "16",
name: "arrow-left"
})
]),
n("div", Y, i(e.target.year + "\u5E74" + Number(e.target.month + 1) + "\u6708"), 1),
n("div", {
class: "uv-calendar-next",
onClick: t[1] || (t[1] = (a) => v(1))
}, [
b(F(w), {
size: "16",
name: "arrow-right"
})
])
]),
n("div", z, [
(u(), d(_, null, S(y, (a) => n("div", {
class: "uv-calendar-header-week-item",
key: a.shortName
}, i(a.chineseShortName), 1)), 64))
])
]),
n("div", R, [
(u(!0), d(_, null, S(c.value, (a, s) => (u(), d("div", {
key: s,
class: "uv-calendar-item",
onClick: (o) => O(a)
}, [
n("div", {
class: J([[
a.dateType === "previous" || a.dateType === "next" ? "uv-calendar-disabled" : "",
a.dateNumber === e.target.date && !["previous", "next"].includes(a.dateType) ? "uv-calendar-selected" : ""
], "uv-calendar-item-label"])
}, i(a.dateNumber), 3)
], 8, $))), 128))
])
]));
}
});
export {
W as default
};