自適配日歷組件開(kāi)發(fā)
作者：JYeontu
來(lái)源：SegmentFault 思否社區(qū)
自適配日歷組件開(kāi)發(fā)
效果圖
PC端
移動(dòng)端
預(yù)覽
預(yù)覽地址：http://jdhnv787.xyz/JYeontu/#/components/calendar
1、傳入?yún)?shù)
1.1、頂部背景圖片
如上圖紅圈區(qū)域的照片背景設(shè)置
在組件參數(shù)中定義
bgSrc: {
type: String,
default: 'https://images8.alphacoders.com/992/992329.jpg'
}1.2、日歷標(biāo)題
如上圖圈住區(qū)域文字設(shè)置
在組件參數(shù)中定義
title: {
type: String,
default: '日歷'
}2、回調(diào)方法
2.1、選中日期
使用this.$emit()向父組件傳遞數(shù)據(jù)。
在組件日期點(diǎn)擊事件中執(zhí)行。
clickDay (day) {
this.selectDay = day
this.$emit('selectDay', day)
}2.2、切換月份
使用this.$emit()向父組件傳遞數(shù)據(jù)。
在組件日期點(diǎn)擊事件中執(zhí)行。
//上個(gè)月
toPreMonth () {
let year = this.selectMonth.split('-')[0]
let month = this.selectMonth.split('-')[1]
month = parseInt(month) - 1
if (month === 0) {
month = 12
year = parseInt(year) - 1
}
this.days = this.fillDays(year, month)
this.$emit('changeMonth', year + '-' + this.zero(month))
},
//下個(gè)月
toNextMonth () {
let year = this.selectMonth.split('-')[0]
let month = this.selectMonth.split('-')[1]
month = parseInt(month) + 1
if (month === 13) {
month = 1
year = parseInt(year) + 1
}
this.days = this.fillDays(year, month)
this.$emit('changeMonth', year + '-' + this.zero(month))
}3、組件js模塊開(kāi)發(fā)流程
3.1、月份天數(shù)確認(rèn)
3.1.1、判斷潤(rùn)年
/**
* 判斷潤(rùn)年
* @param {string} year 需要判斷的年份
* @return {Boolean}
*/
function isLeap(year) {
if((year%4==0 && year%100!=0)||(year%400==0)){
return true;
}
return false;
}3.1.2、獲取月份天數(shù)
/**
* 獲取月份天數(shù)
* @param {string} year 年份
* @param {string} month 月份
* @return {string}
*/
function getMonthDays(year,month) {
month = parseInt(month) - 1;
if(month < 0 || month > 11) return ''
let months = [31,28,31,30,31,30,31,31,30,31,30,31];
if(isLeap(year)){
months[1] = 29;
}
return months[month];
}3.1.3、獲取星期
/**
* 獲取星期
* @param {string} date 需要獲取星期的日期
* @return {string}
*/
function getWeek(date){
let weeks = new Array("日","一","二","三","四","五","六");
let Stamp = new Date(date);
console.log(weeks[Stamp.getDay()])
}3.1.4、補(bǔ)充滿(mǎn)天數(shù)
/**
* 補(bǔ)零
* @param {string} str 需要補(bǔ)零的數(shù)
* @return {string}
*/
function zero(str){
return str > 9 ? str : '0' + str;
}
/**
* 補(bǔ)充滿(mǎn)天數(shù)
* @param {string} year 年份
* @param {string} month 月份
* @return {string}
*/
function fillDays(year,month) {
const months = getMonthDays(year,month);
const startWeek = getWeek(year + '-' + month + '-' + '01');
const endWeek = getWeek(year + '-' + month + '-' + months);
year = parseInt(year);
month = parseInt(month);
let preYear = year;
let preMonth = month - 1;
if(preMonth == 0){
preMonth = 12;
preYear = year - 1;
}
const preMonths = getMonthDays(preYear,preMonth);
let nextYear = year;
let nextMonth = month + 1;
if(nextMonth == 13){
nextMonth = 1;
nextYear = year + 1;
}
const nextMonths = getMonthDays(nextYear,nextMonth);
let days = [];
for(let i = 0; i < startWeek; i++){
days.unshift(preYear + '-' + preMonth + '-' + (preMonths - i));
}
for(let i = 1; i <= months; i++){
days.push(year + '-' + zero(month) + '-' + zero(i));
}
for(let i = 0; i < (6 - endWeek); i++){
days.push(nextYear + '-' + nextMonth + '-0' + (i + 1));
}
return days;
}3.2、點(diǎn)擊事件
3.2.1、月份切換
toPreMonth () {
let year = this.selectMonth.split('-')[0]
let month = this.selectMonth.split('-')[1]
month = parseInt(month) - 1
if (month === 0) {
month = 12
year = parseInt(year) - 1
}
this.days = this.fillDays(year, month)
this.$emit('changeMonth', year + '-' + this.zero(month))
},
toNextMonth () {
let year = this.selectMonth.split('-')[0]
let month = this.selectMonth.split('-')[1]
month = parseInt(month) + 1
if (month === 13) {
month = 1
year = parseInt(year) + 1
}
this.days = this.fillDays(year, month)
this.$emit('changeMonth', year + '-' + this.zero(month))
}3.2.2、日期點(diǎn)擊
clickDay (day) {
this.selectDay = day
this.$emit('selectDay', day)
}4、html模塊
<template>
<div>
<div id="header" class="header">
<div class="header-title">{{title}}</div>
<div class="btn-list">
<div class="btn-list-left">
<div class="btn-pre" @click="toPreMonth()"><</div>
<div class="select-month">{{selectMonth}}</div>
<div class="btn-next" @click="toNextMonth()">></div>
</div>
<div class="btn-today" @click="toNowDay()">回到今天</div>
</div>
</div>
<div class="content" id="content">
<div class="calendar-content">
<div class="grid-week grid" v-for="(item,index) in weeks" :key="index">
周{{item}}
</div>
<div @click="clickDay(item)"
class="grid-day grid"
:class="{'selected': item == selectDay}"
v-for="(item,index) in days"
:key="index">
{{item.split('-')[2]}}
</div>
</div>
</div>
</div>
</template>5、CSS樣式
<style lang="scss" scoped>
@media screen and (max-width:500px) {
.header{
height: calc(100vw * 9 / 16);
}
}
.header{
display: flex;
flex-direction: column;
.header-title{
line-height: 5rem;
}
.btn-list{
display: flex;
padding: 1rem;
margin-top: auto;
.btn-list-left{
padding: 0.5rem;
width: 40%;
display: flex;
.select-month{
flex: 2;
}
.btn-pre{
flex: 1;
background-color: #0080FF;
}
.btn-next{
flex: 1;
background-color: #0080FF;
}
}
.btn-today{
padding: 0.5rem;
margin-left: auto;
margin-right: 1rem;
background-color: #076678;
color: white;
}
}
}
.calendar-content{
display: flex;
flex-wrap: wrap;
width: 100%;
.selected{
background-color: #007FAA;
}
.grid{
width: calc((100% - 9px)/7);
height: 3rem;
line-height: 3rem;
border-left: #005599 solid 1px;
border-bottom: #005599 solid 1px;
}
.grid-week{
border-top: #005599 solid 1px;
}
.grid-week:nth-child(7){
border-right: #005599 solid 1px;
}
.grid-day:nth-child(14){
border-right: #005599 solid 1px;
}
.grid-day:nth-child(21){
border-right: #005599 solid 1px;
}
.grid-day:nth-child(28){
border-right: #005599 solid 1px;
}
.grid-day:nth-child(35){
border-right: #005599 solid 1px;
}
.grid-day:nth-child(42){
border-right: #005599 solid 1px;
}
}
</style>源碼地址
Gitee：
https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/components
點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開(kāi)更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~
- END -
評(píng)論
圖片
表情