技术笔记

介绍

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

安装

npm i calendar-vue3
1

引入

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

使用示例

<template>
<!-- tablecommon -->
 <el-scrollbar class="commonBoxmp" style="background:#c48">
   <calendarVue style="height:720px"
   @handleScopeOf="handleScopeOf"
   @handleCurrent="handleCurrent"
   @handleCurrentEvent="handleCurrentEvent"
   >
     <template #content="{index,data}">
     <div>
        <h3 v-if="state.activeDate==dayjs(data.date).format('YYYY-MM-DD')">✔️ </h3>
        <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 '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:any = reactive({
   activeDate:""
 })
 const handleScopeOf = (e:any)=>{
      setTimeout(() => {
     console.log('ehandleScopeOf :>> ', e.next());
   }, 2000);
}

const handleCurrentEvent = (e:any)=>{
  
   setTimeout(() => {
     console.log('handleCurrentEvent :>> ', e.next());
   }, 2000);
}
const handleCurrent = (e:any)=>{
  
 state.activeDate =  dayjs(e.date).format("YYYY-MM-DD")
 console.log('handleCurrent :>> ', e);
}

</script>

<style  scoped lang="scss" >

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

属性

属性说明类型可选值默认值
placement气泡出现位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
width气泡元素宽度Number--400
popoverData气泡数据Array示例数据格式[ { list:[{ name:"张三",phone:"199" }], date:'2022-01-11' },][]

事件

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

插槽

content

   <calendarVue style="height:720px"
  @handleScopeOf="handleScopeOf"
   @handleCurrent="handleCurrent"
   @handleCurrentEvent="handleCurrentEvent"
   >
     <template #content="{index,data}">
     <div>
        <h4> {{dayjs(data.date).format("YYYY-MM-DD")}}</h4>
     </div>
     </template>
   </calendarVue>
1
2
3
4
5
6
7
8
9
10
11

当前时间展示内容

参数说明类型

| data.date | 当前日期 | Date |

popover

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

         <template #popover="{data}">
       <el-descriptions
    class="margin-top"
    title="With border"
    :column="2"
    :size="size"
    border
  >
   
 <template
 v-for="(item,index) in data" :key="index"
 >
             <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
         名字
        </div>
      </template>
      {{item.name}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          手机号
        </div>
      </template>
        {{item.phone}}
    </el-descriptions-item>
 </template>
  </el-descriptions>
     </template>
   </calendarVue>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

当前时间展示内容

参数说明类型
data当前列表数据 listArray