Electron+Vue3 MAC 版日历开发记录(16)——全面使用Naive UI 重构 Setting 页面

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

要重构，最好的办法就是把之前引入的 Primevue 移除，你就会发现满屏的红通通一片，这是每改一次，就少一片红色，会让你有很大的成就感的。

但因为刚开始，所以我保留两者的存在，好有一个对照。

下面根据官网的介绍，我们开始安装 Naive UI 和对应的字体，以及推荐的图标：

yarn add -D naive-ui
yarn add -D vfonts

yarn add -D @vicons/fluent
yarn add -D @vicons/fa

由于 Naive UI 可以按需引入，所以可以直接删了引入 Primevue 部分：

只需要在你 App 的入口文件导入字体，即可调整 Naive UI 的字体。

// 等宽字体
import 'vfonts/FiraCode.css'

修改 Setting 页面

<template>
  <Sidebar
    v-model:visible="sidebarVisible"
    :base-z-index="1000"
    position="full"
    @click="$emit('update:visibleFullSetting', sidebarVisible)"
  >
    <h2>显示节假日</h2>
    <InputSwitch
      v-model="inputSwitchFestivalsModel"
      @change="$emit('update:changeShowFestivals', inputSwitchFestivalsModel)"
    />
    <h2>显示天气预报</h2>
    <InputSwitch
      v-model="inputSwitchWeatherModel"
      @change="$emit('update:changeShowWeather', inputSwitchWeatherModel)"
    />
    <div
      v-show="inputSwitchWeatherModel"
      class="p-field"
    >
      <label for="location">经纬度：</label>
      <InputMask
        v-model="locationStr"
        mask="999.99,99.99"
        @complete="changeLocalLocation"
      />
    </div>
    <div
      class="p-p-4"
      style="text-align:center;"
    >
      <Knob
        v-model="focus_time"
        :step="5"
        :min="5"
        :max="120"
      />
      <Button
        type="button"
        :label="focusLabel"
        icon="pi pi-play"
        class="p-d-block p-mx-auto p-button-success"
        @click="focus"
      />
    </div>
  </Sidebar>
</template>

通过查看，发现 Setting 里引入的组件最多，所以我们从这个开始，先把按钮替换：

替换按钮组件

这里主要引入 NButton、NIcon按钮组件和图标组件，以及对应的图标 CaretRight：

import Button from 'primevue/button';
import { NButton, NIcon } from 'naive-ui';
import { CaretRight as CaretRightIcon } from '@vicons/fa';

看一看执行结果，比较一下，基本一样了，这样我们就可以把之前引入的 primevue/button的剔除了，当然代码逻辑同步补充过去。

  <n-button type="primary" size="large" @click="focus">
    <template #icon>
      <n-icon>
        <caret-right-icon />
      </n-icon>
    </template>
  {{ focusLabel }}
</n-button>

替换 InputSwitch

看了文档，觉得 InputSwitch 应该对应的是 NSwitch，试一试：

import { NSwitch, NButton, NIcon } from 'naive-ui';

..

<InputSwitch
  v-model="inputSwitchFestivalsModel"
  @change="$emit('update:changeShowFestivals', inputSwitchFestivalsModel)"
/>
<n-switch />

看看执行效果：

对了，现在就是把属性和逻辑补充完整即可：

<n-switch
  :defaultValue="inputSwitchFestivalsModel"
  size="large"
  @click="updateFestivalsModel"
/>

...

updateFestivalsModel(): void {
  this.inputSwitchFestivalsModel = !this.inputSwitchFestivalsModel;
  this.$emit('update:changeShowFestivals', this.inputSwitchFestivalsModel);
},

基本和之前的效果一致了。

小结

替换组件是一个精细活，今晚主要增加了新组件库和替换了两个核心组件：NButton 和 NSwitch，其实其他的也一样，只是刚开始比较难，Naive UI 暂时还没有完整的文档说明，需要自己一个个去看源代码，这也是对自己的考验。

接下来会把全部替换了，看难易程度，把复杂的记录下来。未完待续！