Vue 组件(component)教程之实现精美的日历方法示例

网友投稿 424 2023-02-28


Vue 组件(component)教程之实现精美的日历方法示例

组件(component)是vue最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现、功能和样式。每个页面,根据自己的需要,使用不同的组件来拼接页面。这种开发模式使得前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。

最近应公司的要求,需要开发一个精美的日历组件(IOS , 安卓, PC 的IE9+都能运行),写完后想把它分享出来,希望大家批评。

先来个截图

代码已经分享到 https://github.com/zhangKunUserGit/vue-component  (本地下载)

使用方法

根据需求先说一下怎么用吧 (上面是:HTML, 下面是js )

v-if="showDatePicker"

:date="date"

:min-date="minDate"

:max-date="maxDate"

@confirm="confirm"

@cancel="cancel"

>

v-if="showDatePicker"

:date="date"

:min-date="minDate"

:max-date="maxDate"

@confirm="confirm"

@cancel="cancel"

>

import DataPicker from './components/DatePicker.vue';

import './style.scss';

new Vue({

el: '#app',

data() {

return {

date: '2017-09-11',

minDate: '2000-09-11',

maxDate: '2020-09-11',

showDatePicker: false,

selectedDate: '点击选择日期',

};

},

methods: {

openDatePicker() {

this.showDatePicker = true;

},

confirm(value) {

this.showDatePicker = false;

this.selectedDate = value;

},

cancel() {

this.showDatePicker = falswMSVte;

},

},

components: {

DataPicker,

},

});

我们提供了最大值、最小值和初始值,唯一不足的地方是时间格式只能是YYYY-MM-DD (2017-12-12) ,大家可以从github上拉取代码运行看一下(由于没有仔细测试,可能会有bug和性能问题,希望指出)。

(一)先画好界面

这个不是重点,HTML 和 CSS,应该很简单,大家看我的css 可能感觉我的命名太长了,只因为我们公司用,担心其他样式影响它(可能有其他方式吧,希望大神指出)

(二)组装日期列表

先看代码:

rows() {

const { year, month } = this.showDate;

const months = (new Date(year, month, 0)).getDate();

const result = [];

let row = [];

let weekValue;

// 按照星期分组

for (let i = 1; i <= months; i += 1) {

// 根据日期获取星期,并让开头是1,而非0

weekValue = (new Date(year, month, i)).getDay() +wMSVt 1;

// 判断月第一天在星期几,并填充前面的空白区域

if (i === 1 && weekValue !== 1) {

this.addRowEmptyValue(row, weekValue);

this.addRowDayValue(row, i);

} else {

this.addRowDayValue(row, i);

// 判断月最后一天在星期几,并填充后面的空白区域

if (i === months && weekValue !== 7) {

this.addRowEmptyValue(row, (7 - weekValue) + 1);

}

}

// 按照一周分组

if (weekValue % 7 === 0 || i === months) {

result.push(row);

row = [];

}

}

this.showDate.monthStr = monthJson[this.showDate.month];

return result;

},

我的思路是:

(1)获取月份天数,并按照星期分组;

(2)如果月份第一天不在星期一,前面填充空值。同理,如何月份最后一天不在周日,最后面填充空值,目的是:让分的组 长度都是7,也就是一周。这样可以用flex布局方式快速开发了;

(3)里面也包含一些限制,比如小于minDate和大于maxDate, 不让点击等等

(三)切换月份

(1)上一个月份

/**

* 切换到上一个月

*/

prevMonth() {

if (this.prevMonthClick) {

return;

}

this.prevMonthClick = true;

setTimeout(() => {

this.prevMonthClick = false;

}, 500);

this.fadeXType = 'fadeX_Prev';

// 如何当前月份已经小于等于minMonth 就不让其在执行

if (this.isMinLimitMonth()) {

return;

}

const { year, month } = this.showDate;

// 判断当前月份,如果已经等于1(1就是一月,而不是二月)

if (month <= 1) {

this.showDate.year = year - 1;

this.showDate.month = 12;

} else {

this.showDate.month -= 1;

}

},

setTimeout()主要是让其显示动画后自动消失。 fadeXType 是动画类型

(2)下一个月份

/**

* 切换到下一个月

*/

nextMonth() {

if (this.nextMonthClick) {

return;

}

this.nextMonthClick = truewMSVt;

setTimeout(() => {

this.nextMonthClick = false;

}, 500);

this.fadeXType = 'fadeX_Next';

// 如何当前月份已经大于等于maxMonth 就不让其在执行

if (this.isMaxLimitMonth()) {

return;

}

const { year, month } = this.showDate;

// 判断当前月份,如果已经等于12(12就是十二月)

if (month >= 12) {

this.showDate.year = year + 1;

this.showDate.month = 1;

} else {

this.showDate.month += 1;

}

},

这里面的setTimeout() 和prevMonth方法的原理一样。

上面两种切换月份的功能主要注意:

a. 因为有minDate和maxDate,所以首先考虑的是不能超出这个限制。

b. 要考虑切换月份后年的变化,当月份大于12后,年加1 ,月变成 1。

(四)选择年份

(1)点击最上面的年,显示年份列表

openYearList() {

if (this.showYear) {

this.showYear = false;

return;

}

const index = this.yearList.indexOf(this.selectDate.year);

this.showYear = true;

// 打开年列表,让其定位到选中的位置上

setTimeout(() => {

this.$refs.yearList.scrollTop = (index - 3) * 40;

});

},

(2)选择年份

selectYhttp://ear(value) {

this.showYear = false;

this.showDate.year = value;

let type;

// 当日期在最小值之外,月份换成最小值月份 或者 当日期在最大值之外,月份换成最大值月份

if (this.isMinLimitMonth()) {

type = 'copyMinDate';

} else if (this.isMaxLimitMonth()) { // 当日期在最大值之外,月份换成最大值月份

type = 'copyMaxDate';

}

if (type) {

this.showDate.month = this[type].month;

this.showDate.day = this[type].day;

this.resetSelectDate(this.showDate.day);

return;

}

let dayValue = this.selectDate.day;

// 判断日是最大值,防止另一个月没有这个日期

if (this.selectDate.day > 28) {

const months = (new Date(this.showDate.year, this.showDate.month, 0)).getDate();

// 当前月份没有这么多天,就把当前月份最大值赋值给day

dayValue = months < dayValue ? months : dayValue;

}

this.resetSelectDate(dayValue);

},

在切换年份时注意一下方面:

a. 考虑minDate和maxDate,  因为如果之前你选择的月份是1月,但是限制是9月,在大于minDate(比如2017) 年份没有问题,但是到了minDate 的具体年份(比如2010),那么月份最小值只能是九月,需要修改月份,maxDate同理。

b. 如何之前你选择的day是31,由于切换年份后,这个月只有30天,记得把day 换成这个月最大值,也就是30。

(五)处理原始数据

其实这一条正常情况下,应该放在第一步讲,但是我是根据我的开发习惯来写步骤的。我一般都是先写功能,数据是模拟的,等写好了,再考虑原始数据格式和暴露具体的方法等等,因为这样不会改来改去,影响开发和心情。

initDatePicker() {

this.showDate = { ...this.splitDate(this.date, true) };

this.copyMinDate = { ...this.splitDate(this.minDate) };

this.copyMaxDate = { ...this.splitDate(this.maxDate) };

this.selectDate = { ...this.showDate };

},

splitDate(date, addStr) {

let result = {};

const splitValue = date.split('-');

try {

if (!splitValue || splitValue.length < 3) {

throw new Error('时间格式不正确');

}

result = {

year: Number(splitValue[0]),

month: Number(splitValue[1]),

day: Number(splitValue[2]),

};

if (addStr) {

result.week = (new Date(result.year, result.month, result.day)).getDay() + 1;

result.monthStr = monthJson[result.month];

result.weekStr = weekJson[result.week];

}

} catch (error) {

console.error(error);

}

return result;

},

这里目的是:

a. 处理原始数据,把原始数据查分,用json缓存下来,这样方便后面操作和显示。这里面我只兼容YYYY-MM-DD的格式,其他的都不兼容,如果你想兼容其他格式,你可以修改其代码,或者用moment.js 等其他库帮你做这件事情。

b. 拆分后的格式如下:

year: '',

month: '',

day: '',

week: '',

weekStr: '',

monthStr: '',

总结

上面就是开发这个组件的详细讲解,如有不妥,请指出批评。 仔细想想,其实这个不难,就是有点琐碎。仔细就好

这里的所有动画都是用的Vue 的 transition,大家可以看看官网,非常详细。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:开发Java接口(Java开发接口)
下一篇:一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~