vue实现桌面widget

Vue 实现桌面 Widget 的方法

使用 Electron 构建桌面应用

Electron 是一个流行的框架，可以将 Vue 应用打包为桌面应用。通过 Electron 的 API，可以实现窗口置顶、透明背景等 Widget 特性。

安装 Electron 和 Vue CLI 插件：

vue add electron-builder

配置 background.js 文件，设置窗口属性：

mainWindow = new BrowserWindow({
  width: 300,
  height: 200,
  transparent: true,
  frame: false,
  alwaysOnTop: true
})

使用 Tauri 替代 Electron

Tauri 是一个更轻量级的桌面应用框架，适合构建 Widget 类应用。它基于 Rust 并提供 Vue 集成。

安装 Tauri：

npm install @tauri-apps/cli

配置 tauri.conf.json 设置窗口属性：

{
  "windows": [
    {
      "width": 300,
      "height": 200,
      "transparent": true,
      "decorations": false
    }
  ]
}

实现 Widget 功能

创建可拖拽的 Widget 组件：

<template>
  <div class="widget" @mousedown="startDrag">
    <!-- Widget 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    startDrag(e) {
      window.addEventListener('mousemove', this.onDrag)
      window.addEventListener('mouseup', this.stopDrag)
    },
    onDrag(e) {
      // 更新 Widget 位置
    },
    stopDrag() {
      window.removeEventListener('mousemove', this.onDrag)
      window.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

系统集成

对于 macOS，可以使用 plist 文件配置 Widget 行为。Windows 可以通过注册表设置启动项。

打包应用时，Electron 和 Tauri 都提供自动更新功能，适合长期运行的 Widget。

性能优化

使用 Vue 的 v-once 指令减少不必要的重新渲染：

<div v-once>静态内容</div>

对于频繁更新的数据，使用 computed 属性缓存计算结果：

computed: {
  formattedData() {
    return heavyCalculation(this.data)
  }
}