Запись разработки календаря версии Electron+Vue3 MAC (6) - функция альманаха

внешний интерфейс Vue.js Electron
Запись разработки календаря версии Electron+Vue3 MAC (6) - функция альманаха

Это 6-й день моего участия в Gengwen Challenge.Подробности мероприятия смотрите:Обновить вызов

Сегодня воскресенье, я должен позволить себе спать поздно, и у меня есть время писать код ночью, к счастью, мне нужно обновить статью и сделать запись.

Давайте сегодня напишем простую функцию «Желтый календарь».

Источники данных

В предыдущих статьях:Запись разработки календаря версии Electron+Vue3 MAC (4) - функция лунного календаряЗдесь мы представили получение лунного календаря, в основном с помощью лунного машинописного текста, и большая часть данных функции лунного календаря, которую мы сегодня разработали, исходит из него:

Основные используемые функции:

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. В отображении «уместного» и «табу» употреблениеКомпонент тега, что более интуитивно понятно.

  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/где-источники/где-источники…, добро пожаловать на просмотр), ожидая следующего шага, чтобы продолжить оптимизацию.

Продолжение следует!

Категории