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

这是我参与更文挑战的第6天，活动详情查看：更文挑战

今天是周日，得让自己睡个懒觉，晚上才有时间写写代码，还好想起来了需要更新文章，做个记录。

今天就写个简单的「黄历」功能吧。

数据来源

在之前的文章：Electron+Vue3 MAC 版日历开发记录(4)——农历功能里，我们介绍过农历的获取，主要使用 lunar-typescript，今天我们开发的黄历功能大部分数据来自它：

主要使用的功能有：

getDateViewDate() {
    const nongliString =  `农历${this.lunar.getMonthInChinese()}月${this.lunar.getDayInChinese()}`;
    
    const ganzhi = [
      `${this.lunar.getYearInGanZhi()}${this.lunar.getYearShengXiao()}年`,
      `${this.lunar.getMonthInGanZhi()}月`,
      `${this.lunar.getDayInGanZhi()}日`
    ];
    
    const yangliString = this.solar.toFullString();
    
    const yi = this.lunar.getDayYi();
    
    const ji = this.lunar.getDayJi();
    
    return {
      nongliString: nongliString,
      ganzhi: ganzhi,
      yangliString: yangliString,
      yi: yi,
      ji: ji,
    };
}
复制代码

其中，使用了农历的干支年、月、日，阳历的全量显示 (时间、星期和星座)，还有的就是我们每天关心的「宜」和「忌」，看看每天适宜干什么和最好不干什么。

同样的，代码放在 LunarService 下。

显示布局

这里布局主要使用 PrimeVue Grid 布局，界面也比较简单：

<template>
  <Sidebar
    class="p-grid nested-grid"
    v-model:visible="sidebarVisible"
    :base-z-index="1000"
    position="full"
    @click="$emit('update:visibleFullDateView', sidebarVisible)"
  >
    <h1>黄历</h1>
    <div class="p-grid p-ai-center vertical-container nested-grid border">
      <div class="p-col-2">
        <div class="nongliString">
          {{ lunarData.nongliString }}
        </div>
      </div>
      <div class="p-col-1">
        <div class="p-col-12 onecn" v-for="item in lunarData.ganzhi" :key="item">
          {{ item }}
        </div>
      </div>
      <div class="p-col-9">
        <div class="p-col-12">
          <div class="p-text-bold p-text-center">
            {{ lunarData.yangliString }}
          </div>
        </div>
        <div class="p-col-12">
          <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="宜"></Tag>
          <Tag severity="success" :value="item" rounded v-for="item in lunarData.yi" :key="item"></Tag>
        </div>
        <div class="p-col-12">
          <Tag class="p-mr-2" icon="pi pi-times" severity="danger" value="忌"></Tag>
          <Tag severity="danger" :value="item" rounded v-for="item in lunarData.ji" :key="item"></Tag>
        </div>
      </div>
    </div>
  </Sidebar>
</template>
复制代码

需要说明的是，

在「宜」和「忌」的展示上，是使用了 Tag 组件，比较直观呈现。

在这个黄历布局上，直接使用了 Sidebar，全屏呈现。

最后，就是为了让农历和干支成垂直展示，增加了 css (只要保证字体大小大于宽度即可)：

.nongliString {
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  margin: 0 auto;
  width: 2.5rem;
  font-size: 2.5em;
  color: #000;
}

.onecn {
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  font-size: 1.4em;
}
复制代码

控制开关

在主界面上，监听每个日期组件 Click 事件，在 FullcalendarSub 组件中：

// config：
dateClick: this.dateClick,

// methods：
dateClick(target: any) {
  this.$emit('dateClick', target.date);
},
复制代码

同时在 FullCalendarMain 组件中：

// template
<fullcalendar-sub
  v-model:changeShowFestivals="changeShowFestivals"
  v-model:changeShowWeather="changeShowWeather"
  v-model:weather="weather"
  v-model:location="location"
  @settingClick="visibleFullSetting = true"
  @dateClick="dateClick"
/>

// 黄页组件布局
<date-view-sub
  v-model:visibleFullDateView="visibleFullDateView"
  v-model:date="date"
/>
// methods，拿到 click 的 View 中 date 值，
// 赋值，并显示「黄页」界面
dateClick(date: string) {
  this.date = new Date(date);
  this.visibleFullDateView = true;
},
复制代码

最终显示结果如下：