vue日历组件

栏目: JavaScript · 发布时间: 6年前

内容简介:最近业务需求需要一个日历组件,要求可切换周视图和月视图,并且可以显示日程安排及事件标注。看了下网上已有的日历组件,整体思路如下:

最近业务需求需要一个日历组件,要求可切换周视图和月视图,并且可以显示日程安排及事件标注。

看了下网上已有的日历组件, fullcalendar 插件star还挺多的,文档也挺全面的,但是使用起来不够简便,和我司的应用场景也有些许出入,考虑再三决定还是重新封装一个日历组件。

组件封装

整体思路如下:

1、将涉及日期时间计算的逻辑封装到组件内部,对外暴露change方法,可获取当前日历展示的时间段;

2、另外除接收一些配置信息外,还可以接收事件集合,用于渲染到对应时间格子上,相应的点击事件及日期改变也已经暴露出来,可以根据需要自行封装修改。

<full-calendar :events="fcEvents" @eventClick="fetchEvent" lang="zh" @change="changeDateRange"></full-calendar>
复制代码

3、除此之外,考虑到不同业务逻辑都可能用到日历组件,事件卡片的展示没有封装进去,通过slot暴露出来进行自由编码(参考Element的table元素)。

<!--子组件-->
<slot name="fc-body-card"></slot>

<!--父组件-->
<template slot="fc-body-card">
    <!------>
</template>
复制代码

以上所述就是小编给大家介绍的《vue日历组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++标准库(第2版)

C++标准库(第2版)

Nicolai M. Josuttis / 侯捷 / 电子工业出版社 / 2015-6 / 186.00元

《C++标准库(第2版)》是全球C++经典权威参考书籍时隔12年,基于C++11标准的全新重大升级。标准库提供了一组公共类和接口,极大地拓展了C++语言核心功能。《C++标准库(第2版)》详细讲解了每一标准库组件,包括其设计目的和方法、复杂概念的剖析、实用而高效的编程细节、存在的陷阱、重要的类和函数,又辅以大量用C++11标准实现的实用代码范例。除覆盖全新组件、特性外,《C++标准库(第2版)》一......一起来看看 《C++标准库(第2版)》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具