使用ant design vue的日历组件，实现一个简单交易日与非交易日的切换

需求：

1. 日历区分交易日、非交易日
2. 可以切换面板查看整年交易日信息
3. 可以在手动调整交易日、非交易日

演示实例

序——使用软件及框架版本

1. vue 2.6.11
2. ant-design-vue 1.7.1
3. moment.js（日期转换依赖）

设计思路

1. 使用组件库的a-calendar标签可以实现一个日历的基本框架
2. 每日模块实现交易日、非交易日的区分显示
3. 以及过期和当日的日期灰色显示，且不能切换交易状态
4. 将来的日期可以点击使用a-popconfirm标签来切换交易状态，或者使用右键点击切换

具体代码过程

1. template模板区域

注意事项与难点：

1. a-calendar标签的数据绑定，与数据遍历逻辑，这里数据绑定在a- calendar标签上，日期面板的切换和选中日期的事件都在绑定在此；内层嵌套插槽渲染以一周7天渲染日期，绑定数据几乎不用变化，可以直接拿来用。

2. 交易状态与样式的控制，在模板区域添加多个判断条件区分

3. 嵌入a-popconfirm来通过气泡事件修改交易状态

2. js区域

注意事项与难点：

1. 通过比对日期确定每日的交易状态与日历日期匹配
2. 修改交易状态的方法

总结

一个简单的日历组件就算搭建这样就基本完成了，具体代码可以到下面gitee里面看，如果有错误和改进的地方，欢迎大家指正交流。

Find me

Gitee：https://gitee.com/heyhaiyon/ant-vue-admin.git

微信公众号：heyhaiyang

掘金：heyhaiyang

博客园：heyhaiyang

头条号：heyhaiyang