Vue3.0日历插件

效果图安装环境"vue":"^3.2.6""vite":"^2.5.4"介绍解决思路使用css缩放处理大屏适配问题，项目地址安装npmicalendar-vue3importimport{calendarVue}from'calendar-vue3'import'calendar-vue3/dist/style.css'使用示例<脚本设置lang="ts">import{ref,reactive,onMounted}from'vue';import{useRouter,useRoute}from'vue-router'import{calendarVue}from'calendar-vue3'import'calendar-vue3/dist/style.css'//1.1.0-beta.10版本importdayjsfrom"dayjs";constrouter=useRouter()constroute=useRoute()onMounted(()=>{})/*Basic数据类型是指数据类型（复杂类型）。我个人建议用ref来初始化变量ref和reactive。我们可以简单的理解为ref是对reactive的二次封装。访问ref定义的数据时，多了一个.value*/constcount=ref(0);conststate:any=reactive({activeDate:""})consthandleScopeOf=(e:any)=>{setTimeout(()=>{console.log('ehandleScopeOf:>>',e.next());},2000);}consthandleCurrentEvent=(e:any)=>{setTimeout(()=>{console.log('handleCurrentEvent:>>',e.next());},2000);}consthandleCurrent=(e:any)=>{state.activeDate=dayjs(e.date).format("YYYY-MM-DD")console.log('handleCurrent:>>',e);}Event事件名称说明回调参数handleCurrent左键点击日历会触发date:当前日期handleScopeOf右键添加日程范围选择会触发1、startDate:开始时间,endDate:结束time2、nextfunction点击??结束日期清除界面选择效果handleCurrentEvent右键选择addscheduletotrigger1、date。2、下一个函数点击结束日期清空界面，选择效果槽内容content="{index,data}">

当前时间显示内容参数描述类型索引当前日期表索引值numberdata.date当前日期Date