最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    正文概述 掘金(叶梅树)   2021-07-01   665

    这是我参与更文挑战的第30天,活动详情查看: 更文挑战

    Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    终于到最后一天了,反观这一个月,自己没想到能够坚持下来,每天都挺忙的,也逼着自己没天晚上,不看电视,不玩游戏,不做一些没意义的事情,把所有时间用回来,第一件事就是把当天的记录整理出来,有时候都是一边写代码一边往 Markdown 编辑器粘贴 (这里感谢下 MWeb 这款编辑器,让我省心太多了)。

    今天还是有点水,主要还是放在 Warning 的优化上,看看今晚还剩下 21 个 Warning。

    Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    看 VSCode 也能看出具体在哪行代码上:

    Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    相比于之前的 50 多个,已然少了很多了,着实有点小开心~

    优化 events

    具体看看这个案例:

    Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    其实这个 events 数组在子组件里,我们有引用到 FullCalendar 里定义的 Type:

    // FullcalendarSub.vue
    
    import type {
      CalendarApi,
      CalendarOptions,
      DateSelectArg,
      EventClickArg,
      EventInput,
      EventSourceInput,
      DateRangeInput,
      DateInput,
      DayCellContentArg,
    } from '@fullcalendar/vue3';
    
      props: {
        changeShowFestivals: Boolean,
        changeShowWeather: Boolean,
        events: {
          type: Array,
          default: [] as EventInput[],
        },
      },
    

    所以这里需要追本溯源找到从 Notion API 返回的数据做类型转变。刚巧,我们的 EventService 返回的结果也没加 return type。

    Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    所以可以一并重构了。

    先看看 EventInput 追踪代码:

    declare const EVENT_REFINERS: {
        extendedProps: Identity<Dictionary>;
        start: Identity<DateInput>;
        end: Identity<DateInput>;
        date: Identity<DateInput>;
        allDay: BooleanConstructor;
        id: StringConstructor;
        groupId: StringConstructor;
        title: StringConstructor;
        url: StringConstructor;
    };
    

    其中包含了这几个参数,所以我们可以直接 as

    // EventService.ts
    
    import type { EventInput } from '@fullcalendar/vue3';
    
    
      list2Events(results: []): EventInput[] {
        const events = results.map((element: any) => {
          return {
            'id': element.id,
            'title': element.properties?.title?.rich_text[0].plain_text,
            'start': element.properties?.start?.date.start,
            'end': element.properties?.end?.date.start,
          } as EventInput;
        });
    
        return events;
      }
    

    然后再回到 Main 页面,我们重新在 data 中去定义我们的 events:

    // FullCalendarMain.vue
    
      data() {
        return {
          location: {},
          changeShowFestivals: false,
          changeShowWeather: false,
          visibleFullDateView: false,
          date: new Date(),
          visibleECSub: false,
          events: [] as EventInput[],
          event: null as EventInput,
    

    执行 yarn lint 看看:

    Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    瞬间少了几个了。

    小结

    这两天确实坚持到了极限了,本来还想继续优化,把所有的 warning 都消灭了,但有点顶了。估计从明天开始需要好好休息放空几天了。

    这一阶段告一段落!!!


    起源地下载网 » Electron+Vue3 MAC 版日历开发记录(30)——告一段落

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元