自定义vue3.0日历组件

<>一、前言

别人的东西用起来总是那么的不顺手，UI库的日历组件竟然不返回星期几，完全无法忍受，于是自己动手写了一个日历组件。
自己写的东西，那就是想怎么搞就怎么搞，哈哈哈哈哈。

<>二、代码

我使用的navie的按钮和tailwind的css，替换起来很方便的。
<template> <div class="w-full p-2"> <h1 class="w-full flex justify-between
items-center my-2 px-3 h-10 "> <span class="text-2xl leading-10 font-semibold">{
{ nian + " " + hanziyue + "月" }}</span> <n-button-group> <n-button
@click="gaimonth(-1)" round> <span>{{"<"}}</span> <span>{{"<"}}</span>
<span>上个月</span> </n-button> <n-button @click="gaimonth(1)" round>
<span>下个月</span> <span>{{">"}}</span> <span>{{">"}}</span> </n-button>
</n-button-group> <n-button @click="getnianyueri()"
type="primary">回到今天</n-button> </h1> <div class="w-full flex flex-wrap
justify-start items-start"> <div class="w-1/7 min-w-32 h-32 border
border-gray-300 cursor-pointer" v-for="item in daylist" :key="item.timestamp"
:class="item.month!==yue?'text-gray-400':''" @click="clickevent(item)"> <div
class="w-full h-5 flex justify-between items-center p-1"> <span>{
{item.day}}</span> <span v-if="item.day===xianzaitime.ri &&
item.month===xianzaitime.yue && item.year===xianzaitime.nian"
class="text-blue-600">今天</span> <span>{{item.zhou}}</span> </div> <slot
:year="item.year" :month="item.month" :day="item.day" :week="item.week"></slot>
</div> </div> </div> </template> <script setup> import {computed,
ref,defineEmits} from "vue"; import {useStore} from "vuex" import {useRoute,
useRouter} from "vue-router" import numtozh from "../../util/numtozh"; import
weektozh from "../../util/weektozh"; import {NButton,NButtonGroup} from
"naive-ui" const store = useStore() const router = useRouter() const route =
useRoute() const emit = defineEmits(["handleclick","changemonth"]) //
需要展示的所有日期列表 const daylist = ref([]) // 年月日数据暂存 const shijian = ref(null) const
nian = ref(null) const yue = ref(null) const ri = ref(null) const getnianyueri
= (canshu = null) => { // 置空日期列表 daylist.value = [] if (canshu) { shijian.value
= new Date(canshu) } else { shijian.value = new Date(); } nian.value =
shijian.value.getFullYear() yue.value = shijian.value.getMonth() + 1 ri.value =
shijian.value.getDate() // 当前显示月份改变后，需要向父组件抛出，父组件可以根据月份更新日程
emit("changemonth",{year:nian.value,month:yue.value}) tianchong() } //
计算需要展示的第一个日期 const startandendday=()=>{ const cloneNowDate = new
Date(shijian.value); // 先获取这个月的第一天 const firstdaytime = cloneNowDate.setDate(1)
// 获取第一天是周几 ，修改2021年7月26日 14:42:58，周日是0不是7，我草。 let firstdayweek = new
Date(firstdaytime).getDay() if(firstdayweek===0){ firstdayweek=7 } // 展示时间的第一天
return firstdaytime - (firstdayweek - 1) * 24 * 60 * 60 * 1000 } // 向列表填充数据
const tianchong=()=>{ const starttime = startandendday()
console.log(starttime,"开始时间") for (let i=0;i<=60;i++){ let shuju = {} const
shijianchuo = starttime + i*24*60*60*1000 const sj = new Date(shijianchuo)
const nian1 = sj.getFullYear() const yue1 = sj.getMonth() +1 const ri1 =
sj.getDate() const week = sj.getDay() if(yue.value===1){ if(yue1>yue.value &&
yue1 !== 12){ if(week===1 || week ===7){break} } }else if(yue.value===12){
if(yue1-yue.value===-11){ if(week===1 || week ===7){break} } }else{
if(yue1>yue.value){ if(week===1 || week ===7){break} } } shuju["timestamp"] =
shijianchuo shuju["year"] = nian1 shuju["month"] = yue1 shuju["day"] = ri1
shuju["week"] = week shuju["zhou"] = weektozh(week) daylist.value.push(shuju) }
} // 日期点击事件 const clickevent=(item)=>{ emit("handleclick",item) //
如果点击的日期不是当前月的，修改当前时间 if(item.month !== yue.value){ getnianyueri(item.timestamp)
} } // 数字转汉字 const hanziyue = computed(()=>{ return numtozh(yue.value) }) //
点击上个月或者下个月 const gaimonth=(num)=>{ let newmonth = yue.value + num //
如果大于12，转到下一年 if(newmonth>12){ nian.value += 1 newmonth = 1 } const sj = new
Date(Date.parse(nian.value+"/"+newmonth+"/"+ri.value)).getTime()
getnianyueri(sj) } // 获取今天的时间 const xianzaitime = ref({}) const getnow = ()=>{
const sj = new Date() xianzaitime.value["nian"] = sj.getFullYear()
xianzaitime.value["yue"] = sj.getMonth() +1 xianzaitime.value["ri"] =
sj.getDate() } // 初始化区域 getnow() getnianyueri() </script> <style scoped>
</style>
引入的两个方法的代码
/* * 数字转汉字，就是顶部显示的月份，数字不好看，换成汉字 * */ const dict = { 0: "零", 1: "壹", 2: "贰", 3:
"弎", 4: "肆", 5: "伍", 6: "陆", 7: "柒", 8: "捌", 9: "玖", 10: "拾", 11: "拾壹", 12:
"拾贰", } export default function (num){ return dict[num]; } /* *
数字转汉字，就是每个日期右上角显示的周几 * */ const dict2 = { 1:"周一", 2:"周二", 3:"周三", 4:"周四",
5:"周五", 6:"周六", 0:"周日", } export default function (num){ return dict2[num] }
<>三、使用方法
<rili @handleclick="showtime" @changemonth=“getdata”> <template
v-slot="yuansu"> <div class="w-full h-full px-2 mt-1 overflow-x-hidden
overflow-y-auto"> <span>{{yuansu.year}}-{{yuansu.month}}-{{yuansu.day}}</span>
<p>自定义内容</p> </div> </template> </rili>
<>四、效果图

<>五、结束

有问题或者意见可以提。

• « 上一篇：5G加速智慧物流无人仓储智能化转型
• » 下一篇：查看计算机各程序运行时间,查看电脑运行时间_查看电脑运行时间命令