vue3.0日历

效果图

环境

“vue”: “^3.2.6” “vite”: “^2.5.4”

解决思路 利用css 缩放 来处理大屏适配的问题&＃xff0c;
项目地址

安装

npm i calendar-vue3


引入

import {calendarVue} from &＃39;calendar-vue3&＃39;
import &＃39;calendar-vue3/dist/style.css&＃39;


使用示例

<template>
<el-scrollbar class&＃61;"commonBoxmp white-bg "><calendarVue style&＃61;"height:720px"&＃64;handleScopeOf&＃61;"handleScopeOf"&＃64;handleCurrent&＃61;"handleCurrent"><template #content&＃61;"{index,data}"><div><h4> {{dayjs(data.date).format("YYYY-MM-DD")}} {{}}h4>div>template>calendarVue>el-scrollbar>template><script setup lang&＃61;"ts">
import {ref,reactive,onMounted} from &＃39;vue&＃39;;
import {useRouter,useRoute} from &＃39;vue-router&＃39;
import calendarVue from &＃39;/&＃64;/components/calendar-vue3.vue&＃39;
// import {calendarVue} from &＃39;calendar-vue3&＃39;
// import &＃39;calendar-vue3/dist/style.css&＃39;//1.1.0-beta.10 版本
import dayjs from "dayjs";
const router &＃61; useRouter()const route &＃61; useRoute()onMounted(()&＃61;>{})
/*
基本数据类型
引用数据类型&＃xff08;复杂类型&＃xff09; 个人建议 ref初始化变量
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装,
ref定义的数据访问的时候要多一个.value
*/const count &＃61;ref(0);const state &＃61; reactive({})const handleScopeOf &＃61; (e:any)&＃61;>{console.log(&＃39;e :>> &＃39;, e.next());}const handleCurrent &＃61; (e:any)&＃61;>{console.log(&＃39;e :>> &＃39;, e);
}script><style scoped lang&＃61;"scss" >style>

事件

插槽

content

<calendarVue style&＃61;"height:720px"&＃64;handleScopeOf&＃61;"handleScopeOf"&＃64;handleCurrent&＃61;"handleCurrent"><template #content&＃61;"{index,data}"><div><h4> {{dayjs(data.date).format("YYYY-MM-DD")}}h4>div>template>calendarVue>


当前时间展示内容