electron-vue 图标

提示:图标包括:启动项目时桌面主题图标,窗口左上角图标,菜单栏图标,系统托盘图标,打包安装图标、开始菜单图标、快捷方式图标等。


1. 启动项目默认图标与窗口左上角图标

这两个图标均由 mainWindow 的 icon 属性决定:
代码如下(示例):

mainWindow = new BrowserWindow({
    height: 620,
    width: 400,
    useContentSize: true,
    icon: path.join(__static,"./zero.ico"),
    webPreferences:{
      nodeIntegration:true,
      contextIsolation: false,
      webSecurity: false,
    },    
  })

效果如下:
在这里插入图片描述
另外,窗口左上角 标题 也可以自定义,修改位置如下(注意:修改完成后需重新启动运行代码才可生效):
在这里插入图片描述

2. 菜单栏图标

可在菜单文字表达前添加图标

代码如下(示例):

{
        label: "显示主窗口", 
        icon: path.join(__static,"./logo.png"),      
        click: function() {
            mainWindow.show();         
        } //打开相应页面
    },
      {//打开相应页面
        label: "检查更新",
        type:'checkbox',
        checked: true,
        click: function() { } 
    },

效果如下:
在这里插入图片描述

3. 系统托盘图标

系统托盘图标可自定义设置:

代码如下(示例):

let iconPath = path.join(__static, "./zero.ico");
let appTray = new Tray(iconPath);

效果如下
在这里插入图片描述

4. 打包安装包图标

在 package.json 中配置:

代码如下(示例):

"win": {
      "icon": "build/icons/zero.ico",
      "artifactName": "${productName}_setup_${version}.${ext}",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },

效果如下:
在这里插入图片描述

5. 开始菜单图标和快捷方式图标

在 package.json 中配置 :
其中
createDesktopShortcut表示创建快捷方式图标
createStartMenuShortcut 表示开始菜单图标

代码如下(示例):

"nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./build/icons/zero.ico",
      "uninstallerIcon": "./build/icons/zero.ico",
      "installerHeaderIcon": "./build/icons/zero.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "xxxx"
    }

6、dialog 弹框图标

ipcMain.on('logout',(e)=>{
    dialog.showMessageBox({
      type: 'info',
      noLink:true, // windows 下的传统样式
      title: '提示信息',
      icon:path.join(__static,"./zero.ico"),
      defaultId: 0,
      message:"确定要退出登录吗?",
      buttons:['确定','取消']
    },(index) => {
      if(index === 1){
        // 什么都不做
        e.preventDefault(); // 阻止默认行为            
      }else{
        mainWindow.loadURL(winURL)
        mainWindow.setSize(400,400);
      }
    });
  })

实现效果:
在这里插入图片描述


总结

以上是我个人项目中使用到的图标,欢迎大家补充

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐