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

「这是我参与 2022 首次更文挑战的第 1 天，活动详情查看：2022 首次更文挑战」

上一年因为一些事情, 中间断更了, 今年被疫情困在家, 刚好把上一年的更新完.

准备工作

1. 因为隔的日子有点久, vue3 已经出了一些新的特性, 所以我做的第一件事情是更新 vue 的版本.

yarn add vue@next
yarn add vue-router@next

2. 准备了一些功能要实现:

• 音频的处理.
• 录像.
• 录屏.

布局的调整

我们先通过一些 css 优化一下样式. 给 herder 加个阴影, 改个高度,会看起来顺眼一点.

添加功能列表

定义保存 nav 的数组

<script lang="ts" setup>
  const navList = [
    {
      name: "首页",
      url: "/",
    },
    {
      name: "视频处理",
      url: "/video",
    },
  ];

</script>

循坏遍历

<div class="header">
  <ul>
    <li v-for="item in navList" :key="item.name">{{ item.name }}</li>
  </ul>
</div>

这时我们就会发现 li元素无法选择和点击。因为我们之前为了实现 herder 的拖拽,给 css 加了-webkit-app-region: drag; 属性, 会导致内部的元素无法触发点击事件, 所以要给属性加上-webkit-app-region: no-drag;.

创建组件并添加路由

// router.ts
{
  path: "/video",
  name: "Video",
  component: () => import("@/views/video.vue"),
}

给 nav 添加事件

<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
const navList = [
  {
    name: "首页",
    url: "/",
  },
  {
    name: "视频处理",
    url: "/video",
  },
];

function goPage(path: string) {
  router.push({
    path,
  });
}
</script>

这里需要注意的是：const router = useRouter(); 需要在方法外进行定义, 才能拿到 router实例

布局初步完成

我们初步搭建了要开发的一些准备工作， 接下来要开发是视频的处理功能， 我的初步想法是： 实现视频转gif动图， 每次写文章的时候需要的动图处理起来都很麻烦。

明天要做的工作的，处理视频的初步尝试。