vue3.0 日历

效果图

安装

环境

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

介绍

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

安装

npm i calendar-vue3

引入

import {calendarVue} from 'calendar-vue3'
import 'calendar-vue3/dist/style.css'

使用示例

 <template>
<!-- tablecommon -->
 <el-scrollbar class="commonBoxmp white-bg ">
   <calendarVue style="height:720px"
   @handleScopeOf="handleScopeOf"
   @handleCurrent="handleCurrent"
   >
     <template #content="{index,data}">
     <div>
        <h4> {{dayjs(data.date).format("YYYY-MM-DD")}}   {{}}</h4>
     </div>
     </template>
   </calendarVue>
  </el-scrollbar>
  
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import {useRouter,useRoute} from 'vue-router'
import calendarVue from '/@/components/calendar-vue3.vue'
// import {calendarVue} from 'calendar-vue3'
// import 'calendar-vue3/dist/style.css'//1.1.0-beta.10 版本
import dayjs from "dayjs";
const router = useRouter()
   const route = useRoute()
    onMounted(()=>{
    })
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
 const count =ref(0);
 const state = reactive({
 })
 const handleScopeOf = (e:any)=>{
  console.log('e :>> ', e.next());
  
}

const handleCurrent = (e:any)=>{
  console.log('e :>> ', e);
}

</script>

<style  scoped lang="scss" >

</style>

事件

事件名	说明	回调参数
handleCurrent	左击日历或者右键选择添加日程才会触发	index:当前点击的日历xi下表索引，date:当前日期
handleScopeOf	右键选择添加日程范围选择才会触发	1、startIndex：开始日历下表索引，endIndex：结束日历下表索引，startDate：开始时间，endDate：结束时间。2、next 函数 点击结束日期清空界面选择效果

插槽

content

   <calendarVue style="height:720px"
   @handleScopeOf="handleScopeOf"
   @handleCurrent="handleCurrent"
   >
     <template #content="{index,data}">
     <div>
        <h4> {{dayjs(data.date).format("YYYY-MM-DD")}}</h4>
     </div>
     </template>
   </calendarVue>

当前时间展示内容

参数	说明	类型
index	当前日期下表索引值	number
data.date	当前日期	Date