nuxt引入elementUI日历组件calendar补充

由于项目需求,需要在日历边上设置一个月份选择器来对日历进行更改,因为日历部分需要多tab展示,所以就采用了日历与选择器分离的方式来实现(保证选择器对每一个tab中的日历均有赋值)


image.png

然后就是使用vuex将日历和选择器绑定到同一个值上,使其数据同步。
这边遇到一个小坑,一开始想法是通过change事件来更改vuex中的绑定值,从而触发数据更新,后来一看calendar组件中没有事件暴露。。。。。想不通为啥(其实后来一想这条路根本过不去,因为绑定的是vuex中的值,所以就算有事件也是会报错的,除非把值深拷贝后进行绑定..)。
最后想着用计算属性碰碰运气,没想到还真的可以,set方法的参数正好可以获取到日历当前点击的时间,直接赋值搞定

computed: {
      calendarMouth: {
        get() {
          return this.$store.state.calendarMouth;
        },
        set(val) {
          this.$store.commit("SET_CALENDAR_TIME", val);
        }
      }
    }

选择器的绑定值同理

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,730评论 0 17
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 10,794评论 0 9
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,803评论 1 32
  • 年休回家小住,以为会失眠,没想到一夜睡到自然醒,不过做了好几个梦,且很奇葩特记之。 (1)替夫娶妻 小妹远嫁,一年...
    枯藤残鸦儿阅读 3,142评论 0 3
  • 人的一生最怕的不是死,而是死之前的绝望,这种绝望,很多都来自于他人的言语攻击,有很多人就是因为受不了这样冷漠的世界...
    ff24281912aa阅读 1,566评论 0 1