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

electron + vue3 + ts 实现桌面小工具第三天

前言

今天我们要做的事情是把框架基本搭建起来，一些基础代码写一写，详尽的基础代码会让开发更加快速

窗口设计

无边框窗口

昨天我们学习了electron的BrowserWindow模块。frame参数决定是否有边框。

找到background.ts,修改BrowserWindow的参数frame的参数为true, 如图所示:

之后,我们就得到了一个无边框的窗口:

里面还有一些示例代码,把他删掉:

删除Home.vue和About.vue
创建index.vue
调整router文件,调整后为

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Index from '../views/index.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: Index
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

调整App.vue, 调整后为

<template>
  <router-view />
</template>

<style lang="scss"></style>

窗口的拖动

这个时候我们就发现,我们的窗口似乎拖动不了,不要着急.~~让我再水~~

我们可以通过给元素添加css-webkit-app-region: drag,来设置一个可拖拽区, 这里要注意,设置可拖拽区之后, 区域内的点击事件会失效, 需要设置 -webkit-app-region: no-drag;

我们在项目src文件夹下创建一个layout文件夹, 并在文件夹下创建Header.vue文件.

Header.vue

<template>
  <div class="header"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
});
</script>

<style lang="scss" scoped>
.header {
  -webkit-app-region: drag;
  width: 100%;
  height: 40px;
  background-color: rgb(38, 163, 247);
}
</style>

在App.vue中引入头部

App.vue

<template>
  <Header />
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Header from "@/layout/Header.vue"

export default defineComponent({
  components: {
    Header
  }
});
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box
  ;
}
</style>

效果如下图所示:

今日结语

今天时间有限,有点晚. 明天继续完善样式, 并写一下可能会用到的方法.

ps: ~~大海啊你全是水啊~~ !!