Electron+Vue3 MAC 版日历 开发记录(3)——PrimeVue

2,930 阅读2分钟

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

首先,感谢自己能坚持到第三天,也欢迎大家看看前两天的记录,对本项目有个初步的了解:

Electron+Vue3 MAC 版日历开发记录(1) Electron+Vue3 MAC 版日历 开发记录(2)——功能清单

第三天了,如果不进入实际的代码阶段,显得我刻意为了这次挑战活动而凑数。今天我们从 PrimeVue 入手。

PrimeVue

选择 PrimeVue 的原因

Electron+Vue3 MAC 版日历开发记录(1)中写道,我为什么选择 FullCalendar,但 FullCalendar 本身没有提供 Vue 3 版本代码 (只有 Vue 2),而且国内一些主流的 Vue 组件框架 (如:Element Plus)没有提供 FullCalendar 封装库,在对全网搜索后,发现了 PrimeVue:

PrimeVue 介绍

The Ultimate UI Component Library for Vue 3. 具体官网:primefaces.org/primevue/

PrimeVue 和 fullcalendar 安装

本项目在开发阶段的前端 Vue 组件主要使用到 Primevue,以及配套的 primeiconsprimeflex。除此之外,还需要安装日历本身的组件:@fullcalendar/core@fullcalendar/daygrid@fullcalendar/interaction@fullcalendar/timegrid

"dependencies": {
"@fullcalendar/core": "^5.6.0",
"@fullcalendar/daygrid": "^5.6.0",
"@fullcalendar/interaction": "^5.6.0",
"@fullcalendar/timegrid": "^5.6.0",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primevue": "3.3.5",
}

通过 yarn install 安装后,在 Vue 全局中载入,具体在 renderer/src/index.ts 加入代码:

import * as PrimeVue from 'primevue/config';
import 'primevue/resources/themes/saga-green/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

const app = createApp(App);
app.use(PrimeVue, {ripple: true}).use(router).use(store, key);

app.mount('#app');

其中使用 PrimeVue 自带的 saga-green 主题样式,我们也可以在后续自定义主题,

一切准备就绪后,就可以直接在代码中使用日历组件了。

PrimeVue 使用

直接结合文档 FullCalendar library 写代码:

<template>
  <Fullcalendar
    ref="fullcalendar"
    :events="events"
    :options="calendarOptions"
  />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import '@fullcalendar/core/vdom';
import '@fullcalendar/core';
import {PrimeIcons} from 'primevue/api';
import Fullcalendar from 'primevue/fullcalendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import zhLocale from '@fullcalendar/core/locales/zh-cn';
import 'primeicons/primeicons.css';

export default defineComponent({
  name: 'FullcalendarSub',
  components: {
    Fullcalendar,
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        customButtons: {
          settingButton: {
            text: '',
            icon: PrimeIcons.COG,
            click: this.settingClick,
          },
        },
        headerToolbar: {
          left: 'prev,next',
          center: 'title',
          right: 'settingButton',
        },
        dateClick: this.dateClick,
        editable: false,
        height: 680,
        // contentHeight: 600,
        aspectRatio: 1, // 单元格宽高的比例,宽是高的2倍
        views: this.dayCellNewContent(),
        locale: zhLocale,
      },
    };
  },
});
</script>

这里,引入的两个属性:

  1. events:这个事件后续再说;
  2. calendarOptions:主要为组件做一些配置项。

calendarOptions 解析

在解析之前先看看效果:

  • header 和 customButtons
headerToolbar: {
  left: 'prev,next',
  center: 'title',
  right: 'settingButton',
},

header left 主要包括:上个月/下个月 选择框; header center 主要包括:标题,即当月; header right 主要包括:自定义设置按钮;

其中自定义设置按钮 config:

customButtons: {
  settingButton: {
    text: '',
    icon: PrimeIcons.COG,
    click: this.settingClick,
  },
},

这里我主要是利用图标展示,代替 text,而为了使用 PrimeIcons,我们还需要覆盖 Fullcalendar 自带的样式,具体看 default.scss

@import "primeflex/src/_variables.scss";
@import "primeflex/src/_text.scss";
@import 'primeflex/primeflex.css';

// 使用 PrimeIcons
::v-deep(.fc-icon-pi) {
  font-family: "PrimeIcons" !important;
  text-indent: 0;
  font-size: 1rem !important;
}

click 事件就是为了打开设置界面,这个留给后续整理说明。

  • locale

Fullcalendar 提供了 l18n,这里我们选择中文的,即需要在开始时引入:

import zhLocale from '@fullcalendar/core/locales/zh-cn';
  • plugins 和 views
plugins: [dayGridPlugin, interactionPlugin],

本身 Fullcalendar 提供了好些 View,如本项目使用 dayGridPlugin 直接使用 Month View,至于后续可以使用 Custom Views 和 对应的 API 来做个性化使用,具体直接参考文档使用。

小结

至于如何使用 dayGridPluginMonth View,明天继续整理说明,并解析如何增加「农历显示」。

未完待续!