一、前言

别人的东西用起来总是那么的不顺手，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() + 1ri.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*1000const sj = new Date(shijianchuo)const nian1 = sj.getFullYear()const yue1 = sj.getMonth() +1const 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"] = shijianchuoshuju["year"] = nian1shuju["month"] = yue1shuju["day"] = ri1shuju["week"] = weekshuju["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 += 1newmonth = 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() +1xianzaitime.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>

四、效果图

五、结束

有问题或者意见可以提。

自定义vue3.0日历组件相关推荐

vue 添加全局组件_自定义vue2.0全局组件（下篇）
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
vue3.0父子组件的通信
vue3.0父子组件的通信 Vue3.0组件通信 Vue3.0组件通信 vue3.0脚手架setup内部的组件通信 1.父到子通过props 父组件 <template><div & ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
vue3.0 父子组件通信
子传父:子组件调用父组件方法 vue3.0不再支持this,所以this.$emit()方法不在被支持. 以下为VUE3.0新写法子组件: <script> import { defin ...
vue3.0 父子组件传值问题
使用vue3.0时遇到父子传值的问题,顺便记录一下问题背景: 如图所示,编辑按钮是父组件的部分,下面的表单是子组件需要:按下父组件中的编辑按钮时,子组件的表单需要变成可编辑状态,在可编辑状态下按下 ...
vue3.0子组件向父组件传值-发布订阅者模式
子组件向父组件传值-context.emit 子组件向父组件传值 context.emit 子组件向父组件传值 context.emit 子组件中: 将数据terminationOpinion传给父组 ...
vue3.0 子组件调用父组件中的方法
在vue2中,子组件调用父组件,直接使用this.$emit()即可. 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周 ...
vue3使用的移动端UI框架,vue3.0 ui组件库
vue 3.0 项目中 element-ui form 表单元素中仅 el-button 显示,其他不显示,如何解决? 谷歌人工智能写作项目:小发猫在页面中引用了laydate插件,在显示的时候, ...
vue3.0分页组件
<template><div class="xtx-pagination"><a href="javascript:;" @cli ...

自定义vue3.0日历组件

一、前言

二、代码

三、使用方法

四、效果图

五、结束

自定义vue3.0日历组件相关推荐

最新文章

热门文章