基于Vue3实现日历组件的示例代码
作者:飞仔FeiZai 发布时间:2024-05-29 22:25:16
标签:Vue3,日历
以下是一个基于 Vue 3 实现的简单日历组件的代码示例。这个日历组件包含了前一个月、当前月、下一个月的日期,并且可以支持选择日期、切换月份等功能。
<template>
<div class="calendar">
<div class="header">
<button class="prev" @click="prevMonth"><</button>
<div class="title">{{ title }}</div>
<button class="next" @click="nextMonth">></button>
</div>
<div class="weekdays">
<div v-for="day in daysOfWeek" :key="day" class="day">{{ day }}</div>
</div>
<div class="days">
<div
v-for="day in days"
:key="day.date"
:class="{
today: isToday(day),
selected: isSelected(day),
notCurrentMonth: isNotCurrentMonth(day),
}"
@click="select(day)"
>
{{ day.day }}
</div>
</div>
</div>
</template>
<script>
import { ref, computed } from "vue";
export default {
name: "FeiCalendar",
props: {
selectedDate: Date,
},
emits: ["update:selectedDate"],
setup(props, { emit }) {
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const currentDate = ref(new Date());
const selectedDate = ref(props.selectedDate || currentDate.value);
const daysOfWeek = computed(() => {
return weekdays;
});
const days = computed(() => {
const year = currentDate.value.getFullYear();
const month = currentDate.value.getMonth();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const daysInLastMonth = new Date(year, month, 0).getDate();
const firstDayOfMonth = new Date(year, month, 1).getDay();
const days = [];
let day = 1;
let lastMonthDay = daysInLastMonth - firstDayOfMonth + 1;
let nextMonthDay = 1;
for (let i = 0; i < 6 * 7; i++) {
if (i < firstDayOfMonth) {
days.push({
date: new Date(year, month - 1, lastMonthDay),
day: lastMonthDay,
isLastMonth: true,
isNextMonth: false,
});
lastMonthDay++;
} else if (i >= firstDayOfMonth + daysInMonth) {
days.push({
date: new Date(year, month + 1, nextMonthDay),
day: nextMonthDay,
isLastMonth: false,
isNextMonth: true,
});
nextMonthDay++;
} else {
const date = new Date(year, month, day);
days.push({ date, day, isLastMonth: false, isNextMonth: false });
day++;
}
}
return days;
});
const title = computed(
() =>
`${currentDate.value.toLocaleString("default", {
month: "long",
})} ${currentDate.value.getFullYear()}`
);
const prevMonth = () => {
currentDate.value = new Date(
currentDate.value.getFullYear(),
currentDate.value.getMonth() - 1,
1
);
};
const nextMonth = () => {
currentDate.value = new Date(
currentDate.value.getFullYear(),
currentDate.value.getMonth() + 1,
1
);
};
const isToday = (day) => {
const today = new Date();
return day.date.toDateString() === today.toDateString();
};
const isSelected = (day) => {
return day.date.toDateString() === selectedDate.value.toDateString();
};
const isNotCurrentMonth = (day) => {
return day.isLastMonth || day.isNextMonth;
};
const select = (day) => {
selectedDate.value = day.date;
emit("update:selectedDate", day.date);
};
return {
daysOfWeek,
days,
title,
prevMonth,
nextMonth,
isToday,
isSelected,
isNotCurrentMonth,
select,
};
},
};
</script>
<style>
.calendar {
max-width: 500px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.title {
font-size: 18px;
font-weight: bold;
}
.weekdays {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
}
.day {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 10px;
}
.today {
background-color: lightblue;
}
.selected {
background-color: blue;
color: white;
}
.notCurrentMonth {
color: #ccc;
}
</style>
使用该组件时,可以将selectedDate
属性绑定到一个父组件中的数据,这个数据将会存储选中的日期。例如:
<template>
<div>
<!-- 用法一 -->
<FeiCalendar
:selectedDate="selectedDate"
@update:selectedDate="onSelectedDateUpdated"
/>
<!-- 用法二 -->
<!-- <FeiCalendar v-model:selectedDate="selectedDate" /> -->
<p>Selected date: {{ selectedDate }}</p>
</div>
</template>
<script>
import FeiCalendar from "./FeiCalendar.vue";
export default {
components: {
FeiCalendar,
},
data() {
return {
selectedDate: new Date(),
};
},
watch: {
selectedDate(nv) {
console.log("nv", nv);
},
},
methods: {
onSelectedDateUpdated(selectedDate) {
this.selectedDate = selectedDate;
},
},
};
</script>
这是一个简单的示例,可以根据自己的需求对代码进行修改和扩展。
来源:https://www.cnblogs.com/yuzhihui/p/17332364.html
0
投稿
猜你喜欢
- mysql是我们项目中非常常用的数据型数据库。但是因为我们需要在数据库保存中文字符,所以经常遇到数据库乱码情况。下面就来介绍一下如何彻底解决
- 1.MySQL中并发和隔离控制机制Meta-data元数据锁:在table cache缓存里实现的,为DDL(Data Definition
- 一个简单的实现class NaiveFilter():'''Filter Messages from keyword
- mysql中in条件使用字符串场景当sql使用in作为条件时,使用一个参数满足查询条件,直接传入字符串无法满足条件。select id,na
- 简介Wikipedia、Facebook 和 Yahoo! 等主要 web 属性使用 LAMP 架构来为每天数百万的请求提供服务,而 Wor
- 知识点: 函数 replicate 以下代码是实现如下功能: 代码如下:declare @sql varchar(200), --需填充的字
- 利用mask(掩模)技术提取纯色背景图像ROI区域中的人和物,并将提取出来的人或物添加在其他图像上。1、实现原理先通过cv.cvtColor
- 涉及到开发桌面程序,尤其是文本处理,剪贴板就很常用,不像 java 中那么烦锁,wxpython 中访问剪贴板非常简单,寥寥几句足以。# 取
- 在Python中,很多对象都是可以通过for语句来直接遍历的,例如list、string、dict等等,这些对象都可以被称为可迭代对象。至于
- 【JS对象属性的查询和设置】可以通过点(.) 或 方括号([]) 运算符来获取属性的值。运算符左侧应当是一个表达式,它返回一个对象。对于点(
- 安装python中文分词库jieba法1:Anaconda Prompt下输入conda install jieba法2:Terminal下
- 最近在学习python著名的绘图包matplotlib时发现,有时候图例等设置无法正常显示中文,于是就想把这个问题解决了。PS:本文仅针对W
- 目录介绍:原理:1.标准import2.reload函数实现:总结:介绍:热更新,就是在服务器不重启的的情况下,对游戏增加新的功能或者修复出
- 1.用一个栈【python中可以用List】就可以解决,时间和空间复杂度都是O(n)# -*- coding: utf8 -*-# 符号表S
- difflib模块提供的类和方法用来进行序列的差异化比较,它能够比对文件并生成差异结果文本或者html格式的差异化比较页面,如果需要比较目录
- 首先呢,需要有两个mysql服务器。如果做测试的话可以在同一台机器上装两个mysql服务程序,注意要两个运行程序的端口不能一样。我用的是一个
- 签名import base64import jsonimport timefrom datetime import datetimeimpo
- parse_dates : boolean or list of ints or names or list of lists or dic
- 本文实例讲述了Python记录详细调用堆栈日志的方法。分享给大家供大家参考。具体实现方法如下:import sysimport osdef
- 官方文档介绍链接:append方法介绍DataFrame.append(other, ignore_index=False, verify_