当前位置：首页 > VUE

vue实现桌面widget

2026-02-10 19:45:53VUE

Vue 实现桌面 Widget 的方法

使用 Vue 实现桌面 Widget 可以通过 Electron 或 PWA 技术实现。Electron 适合需要系统级访问的桌面应用，而 PWA 适合轻量级的 Web 应用。

使用 Electron 实现

Electron 允许使用 Web 技术开发跨平台桌面应用。以下是一个简单的实现步骤：

安装 Electron 和 Vue CLI：

npm install -g @vue/cli
vue create my-widget
cd my-widget
npm install electron --save-dev

创建 Electron 主进程文件 electron/main.js：

const { app, BrowserWindow } = require('electron')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    frame: false,
    transparent: true,
    alwaysOnTop: true,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadFile('dist/index.html')
}

app.whenReady().then(createWindow)

修改 package.json 添加 Electron 启动脚本：

{
  "main": "electron/main.js",
  "scripts": {
    "electron:serve": "vue-cli-service build && electron ."
  }
}

使用 PWA 实现

PWA 允许将 Web 应用安装到桌面。使用 Vue CLI 的 PWA 插件可以快速实现：

创建 Vue PWA 项目：

vue create my-pwa-widget
cd my-pwa-widget
vue add pwa

配置 vue.config.js 定义 PWA 设置：

module.exports = {
  pwa: {
    name: 'My Widget',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    manifestOptions: {
      display: 'standalone',
      background_color: '#FFFFFF'
    }
  }
}

Widget 样式优化

为了实现桌面 Widget 的悬浮效果，可以添加以下 CSS：

.widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

实现拖拽功能

通过 Vue 的指令实现 Widget 拖拽：

Vue.directive('drag', {
  bind(el) {
    el.onmousedown = function(e) {
      const disX = e.clientX - el.offsetLeft
      const disY = e.clientY - el.offsetTop
      document.onmousemove = function(e) {
        el.style.left = e.clientX - disX + 'px'
        el.style.top = e.clientY - disY + 'px'
      }
      document.onmouseup = function() {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

在模板中使用：

vue实现桌面widget