vue自定义日历组件

代码地址

https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar

享一下组件目录

在这里插入图片描述

tip: 组件功能:

  1. 展示当前年份当前月,
  2. 支持左右 icon自定义
  3. 支持自定义当前日提示边框颜色
  4. 支持自定义某一日选择背景颜色, 边框染色如已经自定义边框颜色则为自定义颜色
  5. 某一日选中采用圆点模式

使用

引入 main.js
在这里插入图片描述
组件中使用
默认
在这里插入图片描述
自定义左侧icon
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019030120084725.png在这里插入图片描述
某一个日期出现选中状态, 圆点模式
在这里插入图片描述

ps: 自定义某一日 数据传递

[ { active : 1 } ]
数组对象, 其中必须有 key = active, value :Number // 为组件判断某一日选中参数

默认效果

在这里插入图片描述

效果图2, 某个日期出现选中 默认模式

在这里插入图片描述

效果图2, 某个日期出现选中 圆点模式

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_38644883/article/details/88067612