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

4,971 阅读1分钟

这是我参与更文挑战的第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>

需要说明的是,

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

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

  1. 最后,就是为了让农历和干支成垂直展示,增加了 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;
},

最终显示结果如下:

小结

由于时间仓促,没有把天气预报和节假日等信息放进去,以及页面布局和样式好好调一调 (代码已经同步到 github.com/fanly/fanly…,欢迎查看),等着下一步好好继续优化。

未完待续!