uv-ui/lib/components/calendar/calendar.cjs

基于vue3的移动端组件库

"use strict";const t=require("vue"),v=require("../icon/index.cjs");require("./calendar.vue_vue_type_style_index_0_lang.cjs");const k={class:"uv-calendar"},x={class:"uv-calendar-header"},w={class:"uv-calendar-header-action"},E={class:"uv-calendar-title"},M={class:"uv-calendar-header-week"},V={class:"uv-calendar-content"},T=["onClick"],C={name:"UvCalendar"},j=Object.assign(C,{props:{modelValue:{type:Date}},emits:["update:modelValue"],setup(p,{emit:D}){const f=p,b=1900,_=9999,l=t.ref(f.modelValue),c={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"]},i=[{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}],F=new Date,e=t.reactive({target:{year:null,month:null,date:null,day:null,monthShortName:null,monthFullName:null,monthChineseFullName:null,firstDay:null,firstDayIndex:null,totalDays:null},previous:{totalDays:null}}),u=t.ref([]);function m(){if(l.value||(l.value=F),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<b||e.target.year>_){console.error("\u65E0\u6548\u7684\u5E74\u4EFD\uFF0C\u8BF7\u68C0\u67E5\u4F20\u5165\u7684\u6570\u636E\u662F\u5426\u662F\u6B63\u5E38");return}let n="";n=l.value.toString().split(" "),e.target.monthShortName=n[1],e.target.monthFullName=c.fullName[e.target.month],e.target.monthChineseFullName=c.chineseFullName[e.target.month];const a=new Date(e.target.year,e.target.month,1);e.target.firstDay=a.getDay(),e.target.firstDayIndex=i.findIndex(o=>o.dayNumber===e.target.firstDay);const r=new Date(e.target.year,e.target.month+1,0);e.target.totalDays=r.getDate();const s=new Date(e.target.year,e.target.month,0);e.previous.totalDays=s.getDate()}function h(){let n,a=1;const r=[],s=[];for(n=0;n<=6;n++)if(n<e.target.firstDayIndex){const o=e.previous.totalDays-e.target.firstDayIndex+(n+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,a),dateNumber:a,dateType:"current"}),a++;r.push(...s);for(let o=0;o<=4;o++){const d=[];for(let y=0;y<=6;y++){if(a<=e.target.totalDays)d.push({dateObj:new Date(e.target.year,e.target.month,a),dateNumber:a,dateType:"current"});else{const g=a-e.target.totalDays;d.push({dateObj:new Date(e.target.year,e.target.month+1,g),dateNumber:g,dateType:"next"})}a++}r.push(...d)}u.value=r}function N(n){let a=e.target.month+n,r=e.target.year;a>11?(a=0,r+=1):a<0&&(a=11,r-=1),l.value=new Date(r,a,1),m(),h()}function S(n){["previous","next"].includes(n.dateType)||(console.log(n),e.target.date=n.dateNumber,D("update:modelValue",n.dateObj))}return t.onMounted(()=>{m(),h(),console.log(e),console.log(u.value)}),(n,a)=>(t.openBlock(),t.createElementBlock("div",k,[t.createElementVNode("div",x,[t.createElementVNode("div",w,[t.createElementVNode("div",{class:"uv-calendar-pre",onClick:a[0]||(a[0]=r=>N(-1))},[t.createVNode(t.unref(v),{size:"16",name:"arrow-left"})]),t.createElementVNode("div",E,t.toDisplayString(e.target.year+"\u5E74"+Number(e.target.month+1)+"\u6708"),1),t.createElementVNode("div",{class:"uv-calendar-next",onClick:a[1]||(a[1]=r=>N(1))},[t.createVNode(t.unref(v),{size:"16",name:"arrow-right"})])]),t.createElementVNode("div",M,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(i,r=>t.createElementVNode("div",{class:"uv-calendar-header-week-item",key:r.shortName},t.toDisplayString(r.chineseShortName),1)),64))])]),t.createElementVNode("div",V,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(u.value,(r,s)=>(t.openBlock(),t.createElementBlock("div",{key:s,class:"uv-calendar-item",onClick:o=>S(r)},[t.createElementVNode("div",{class:t.normalizeClass([[r.dateType==="previous"||r.dateType==="next"?"uv-calendar-disabled":"",r.dateNumber===e.target.date&&!["previous","next"].includes(r.dateType)?"uv-calendar-selected":""],"uv-calendar-item-label"])},t.toDisplayString(r.dateNumber),3)],8,T))),128))])]))}});module.exports=j;