eletron+vue 做一个日程提醒工具

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 4 天，点击查看活动详情

eletron 学习第四天

eletron+vue

使用 eletron+vue 做一个日程提醒工具。

效果图

提醒喝水

按时休息

安装

vue add eletron-vue //根据提示生成vuecli项目
cd eletron-vue
vue add electron-builder //插件直接生成eletron+vue项目

项目结构

SFC 文件想使用 eletron 主进程的 Api,引入 @electron/remote

npm i @electron/remote

background.js 中初始化并设置启用

//background.js
require("@electron/remote/main").initialize();
//createWindow 函数中加入
require("@electron/remote/main").enable(win.webContents);
//.vue文件中引入
const { Notification } = window.require("@electron/remote");

提醒事宜的前置条件

需要安装node-schedule

 npm i node-schedule 

• node-schedule的规则，戳这里

修改App.vue

<template>
  <div id="app">
    <el-row class="box">
      <el-col :span="4" class="border-box">
        <el-menu
          class="menu-box"
          default-active="1"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">
            <i class="el-icon-setting"></i>
            <span slot="title">今日计划</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" class="border-box">
        <el-row>
          <el-form size="mini" inline :model="formData">
            <el-form-item label="任务名称">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="提醒时间">
              <el-time-select
                v-model="formData.tipsTime"
                :picker-options="{
                  start: '14:20',
                  step: '00:1',
                  end: '18:30',
                }"
                placeholder="选择时间"
              >
              </el-time-select>
            </el-form-item>
            <el-form-item>
              <el-row type="flex" justify="end">
                <el-button type="primary" @click="add">加入任务</el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-table border :data="tableData">
            <el-table-column label="任务名称" prop="name"></el-table-column>
            <el-table-column label="提醒时间" prop="tipsTime"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ $index }">
                <el-button type="text" @click="stop($index)"
                  >停止提醒</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { Notification, BrowserWindow, screen } =
  window.require("@electron/remote");
const schedule = require("node-schedule");
export default {
  name: "App",
  data() {
    return {
      formData: {
        name: "",
        tipsTime: "",
      },
      tableData: [
        {
          name: "休息眼睛",
          tipsTime: "30分钟休息一次",
          type: "default",
        },
      ],
    };
  },
  mounted() {
    // this.defaultFn();
  },
  methods: {
    stop(index) {
      this.tableData[index].fn.cancel();
      console.log(index);
    },
    defaultFn() {
      this.tableData.forEach((item) => {
        if (item.type) {
          item.fn = schedule.scheduleJob(`1 * * * * *`, () => {//
            const win = new BrowserWindow({
              width: screen.getPrimaryDisplay().workAreaSize.width,//获取当前电脑屏幕的宽度
              height: screen.getPrimaryDisplay().workAreaSize.height,//获取当前电脑屏幕的高度
              frame: false,
            });
            win.loadURL(
              "file:///C:/Users/Administrator/Desktop/my-electron-app1/vue-eletron/src/rest.html"//自己编写一个休息的页面即可
            );
          });
        }
      });
    },
    add() {
      this.tableData.push(this.formData);
      const tipsTime = this.formData.tipsTime.split(":");
      const { name } = this.formData;
      const tipsFn = () => {
        new Notification({
          title: name,
          body: "小给给" + name,
        }).show();
      };
      this.tableData[this.tableData.length - 1].fn = schedule.scheduleJob(
        `0 ${tipsTime[1]} ${tipsTime[0]} * * *`,
        tipsFn
      );
      this.formData = {
        name: "",
        tipsTime: "",
      };
    },
  },
};
</script>

<style>
* {
  box-sizing: content-box;
}
.border-box {
  height: 100vh;
  border: 2px dashed #eee;
}
.box:first-child {
  border: 0;
}
.menu-box {
  height: calc(100vh - 5px);
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>

结语

eletron学习就此告一段落拉。