网站漂浮图片,公司做英文网站,广东南方购物频道app,广州做礼物的网站效果预览 技术要点 透明背景
src/main/index.ts 的 new BrowserWindow 中添加 transparent: true, // 设置窗口背景透明frame: false, // 隐藏窗口边框仅图标和标题部分可拖拽 仅图标和标题部分添加样式 drag
.drag {-webkit-app-region: drag;
}图标与标题栏的融合
标题栏的… 效果预览 技术要点 透明背景
src/main/index.ts 的 new BrowserWindow 中添加 transparent: true, // 设置窗口背景透明frame: false, // 隐藏窗口边框仅图标和标题部分可拖拽 仅图标和标题部分添加样式 drag
.drag {-webkit-app-region: drag;
}图标与标题栏的融合
标题栏的背景色采用图标的背景色
bg-[#0baaf5]标题栏添加顶部的外边距值为图标的半径
mt-30px图标的样式如下
img :srcicon altlogo classfixed h-60px top-[0px] drag /窗口置顶 Iconv-ififTopiconstash:pin-thumbtack-solid:classiconClassStringclickcancle_top/Icon v-else iconstash:pin-thumbtack :classiconClassString clicktop /const ifTop ref(false)// 窗口置顶
function top() {window.electron.ipcRenderer.send(top)ifTop.value true
}function cancle_top() {window.electron.ipcRenderer.send(cancle_top)ifTop.value false
}src/main/index.ts 中 ipcMain.on(top, () {mainWindow.setAlwaysOnTop(true)})ipcMain.on(cancle_top, () {mainWindow.setAlwaysOnTop(false)})窗口最小化 Icon iconqlementine-icons:windows-minimize-16 :classiconClassString clickmin /function min() {window.electron.ipcRenderer.send(min)
}src/main/index.ts 中 ipcMain.on(min, () {mainWindow.minimize()})窗口最大化 / 取消最大化 Iconv-ififMaxiconqlementine-icons:windows-unmaximize-16:classiconClassStringclickcancel_max/Iconv-elseiconqlementine-icons:windows-maximize-16:classiconClassStringclickmax/const ifMax ref(false)function max() {window.electron.ipcRenderer.send(max)
}function cancel_max() {window.electron.ipcRenderer.send(cancel_max)
}window.electron.ipcRenderer.on(unmaximize, () {ifMax.value false
})window.electron.ipcRenderer.on(maximize, () {ifMax.value true
})src/main/index.ts 中 ipcMain.on(max, () {mainWindow.maximize()})ipcMain.on(cancel_max, () {mainWindow.unmaximize()})因将窗口拖拽到屏幕边缘时会自动触发最大化调整窗口大小会退出最大化则需监听窗口最大化和退出最大化事件由主进程通知渲染进程状态以便切换图标。[ 不适应于本范例因本范例隐藏了 frame ] // 窗口变为最大化状态mainWindow.on(maximize, () {mainWindow.webContents.send(maximize)})// 窗口从最大化状态退出mainWindow.on(unmaximize, () {mainWindow.webContents.send(unmaximize)})隐藏窗口到托盘 Icon iconsi:close-fill :classiconClassString clickhide /function hide() {window.electron.ipcRenderer.send(hide)
}src/main/index.ts 中 ipcMain.on(hide, () {// 使窗口不显示在任务栏中mainWindow.setSkipTaskbar(true)mainWindow.hide()})代码实现 src/renderer/src/components/TitleBar.vue
script setup langts
import icon from ../../../../resources/icon.png
const props defineProps({title: {type: String}
})function hide() {window.electron.ipcRenderer.send(hide)
}const ifTop ref(false)// 窗口置顶
function top() {window.electron.ipcRenderer.send(top)ifTop.value true
}function cancle_top() {window.electron.ipcRenderer.send(cancle_top)ifTop.value false
}function min() {window.electron.ipcRenderer.send(min)
}const ifMax ref(false)function max() {window.electron.ipcRenderer.send(max)
}function cancel_max() {window.electron.ipcRenderer.send(cancel_max)
}window.electron.ipcRenderer.on(unmaximize, () {ifMax.value false
})window.electron.ipcRenderer.on(maximize, () {ifMax.value true
})const iconClassString cursor-pointer hover:bg-blue-500 block h-full px-2
/scripttemplateimg :srcicon altlogo classfixed h-60px top-[0px] drag /div classflex items-center bg-[#0baaf5] text-white h-30px mt-30pxdiv classdrag flex-1 pl-70px font-bold text-white{{ props.title }}/divdiv classflex h-fullIconv-ififTopiconstash:pin-thumbtack-solid:classiconClassStringclickcancle_top/Icon v-else iconstash:pin-thumbtack :classiconClassString clicktop /Icon iconqlementine-icons:windows-minimize-16 :classiconClassString clickmin /Iconv-ififMaxiconqlementine-icons:windows-unmaximize-16:classiconClassStringclickcancel_max/Iconv-elseiconqlementine-icons:windows-maximize-16:classiconClassStringclickmax/Icon iconsi:close-fill :classiconClassString clickhide //div/div
/template页面使用
TitleBar title邀请函 /src/main/index.ts
import { app, shell, BrowserWindow, ipcMain, Tray, Menu } from electron
import { join } from path
import { electronApp, optimizer, is } from electron-toolkit/utils
import icon from ../../resources/icon.png?assetfunction createWindow(): void {const mainWindow new BrowserWindow({// 自定义图标icon: icon,// 自定义窗口宽度width: 360,// 自定义窗口高度height: 430,//默认隐藏窗口show: false,// 隐藏窗口标题栏titleBarStyle: hidden,// 隐藏默认菜单autoHideMenuBar: true,// 不可改变窗口大小resizable: false,// 不可改变窗口大小maximizable: false,transparent: true, // 设置窗口背景透明frame: false, // 隐藏窗口边框webPreferences: {preload: join(__dirname, ../preload/index.js),sandbox: false}})// 托盘const tray new Tray(icon)const contextMenu [{label: 退出,click: function () {app.exit()}}]const menu Menu.buildFromTemplate(contextMenu)tray.setToolTip(EC编程俱乐部)tray.setContextMenu(menu)tray.on(click, () {// 使窗口显示在任务栏中mainWindow.setSkipTaskbar(false)mainWindow.show()})// IPC通信ipcMain.on(showPage_home, () {// 窗口可调整大小mainWindow.setResizable(true)mainWindow.setSize(800, 720)// 窗口居中mainWindow.center()// 窗口可最大化mainWindow.setMaximizable(true)})ipcMain.on(top, () {mainWindow.setAlwaysOnTop(true)})ipcMain.on(cancle_top, () {mainWindow.setAlwaysOnTop(false)})ipcMain.on(hide, () {// 使窗口不显示在任务栏中mainWindow.setSkipTaskbar(true)mainWindow.hide()})ipcMain.on(min, () {mainWindow.minimize()})ipcMain.on(max, () {mainWindow.maximize()})ipcMain.on(cancel_max, () {mainWindow.unmaximize()})mainWindow.on(ready-to-show, () {// 自定义标题mainWindow.setTitle(EC编程俱乐部)mainWindow.show()})// 窗口变为最大化状态mainWindow.on(maximize, () {mainWindow.webContents.send(maximize)})// 窗口从最大化状态退出mainWindow.on(unmaximize, () {mainWindow.webContents.send(unmaximize)})mainWindow.webContents.setWindowOpenHandler((details) {shell.openExternal(details.url)return { action: deny }})if (is.dev process.env[ELECTRON_RENDERER_URL]) {mainWindow.loadURL(process.env[ELECTRON_RENDERER_URL])} else {mainWindow.loadFile(join(__dirname, ../renderer/index.html))}
}app.whenReady().then(() {// Set app user model id for windowselectronApp.setAppUserModelId(com.electron)app.on(browser-window-created, (_, window) {optimizer.watchWindowShortcuts(window)})createWindow()app.on(activate, function () {if (BrowserWindow.getAllWindows().length 0) createWindow()})
})ipcMain.on(quit, () {app.quit()
})app.on(window-all-closed, () {if (process.platform ! darwin) {app.quit()}
})
