fullcalendar在vue和react前端项目中的应用

zzjyr
724 阅读2分钟

fullcalendar官网

vue前端项目中的应用

image.png

image.png

image.png

image.png

注意点 ref的访问方式

image.png

image.png

image.png

image.png react 的ref访问

image.png

image.png

image.png

难点总结1

  1. 问题 治疗调度日历看板 和发起治疗弹框里面的日历看板会互相影响 导致弹框里面的日历看板不能拖拽
  2. 定位问题 先后渲染的顺序有影响 （弹窗里面的日历看板先渲染 治疗调度看板后渲染 两个日历看板的拖拽都可以拖拽）
  3. 解决问题 element UI dialog 懒加载导致只有打开弹窗才渲染里面治疗中的日历看板 改成了antdesignvue里面的drawer 即可

难点总结2

  1. 问题：弹框里面治疗中的节点 日历看板组的数据渲染问题 治疗计划，治疗项目联动治疗中的节点 治疗中的节点的操作人联动表单十几个个字段 以及后端返回的治疗节点的默认操作人 根据治疗中的节点每一个节点的操作人再去请求日历看板的接口数据 进行渲染
  2. 解决思路： 遍历治疗中的节点在forEach里面请求接口 要在forEach的回调函数里面加上async语法糖 对应的接口数据才能挂到对应的节点上 还有实时更新数据不能直接赋值 要用this.set进行响应式实时更新但是选择诊间的时候顾客的卡片接口数据返回来了但是只渲染了一部分大部分情况是好的偶尔会数据丢失后来查资料跟同伴讨论发现对于复杂数据的对象更新应该先用this.set进行响应式实时更新 但是选择诊间的时候 顾客的卡片接口数据返回来了 但是只渲染了一部分 大部分情况是好的 偶尔会数据丢失 后来查资料跟同伴讨论发现 对于复杂数据的对象更新应该先用this.delete 删除 再set值 这样就不会出现只渲染一部分值的情况了
  3. 附上原码 image.png

react前端项目中的应用

image.png image.png

image.png 日历看板实时增量更新 websocket 加 封装一个增量更新的日历看板组件

image.png

image.png

image.png

image.png

image.png

总结： vue项目和react项目同时做的话 要切换思维 很多写法不一样 vue好上手 react 要更深入才能更好的解决问题

avatar
文章
阅读
粉丝