mirror of
https://gitee.com/energye/energy.git
synced 2024-12-02 19:57:48 +08:00
demos: 无标题和边框窗口示例
This commit is contained in:
杨红岩
parent
b8cfbc1b9e
commit
a2226dd954
@ -1,3 +1,11 @@
|
||||
//----------------------------------------
|
||||
//
|
||||
// Copyright © yanghy. All Rights Reserved.
|
||||
//
|
||||
// Licensed under GNU General Public License v3.0
|
||||
//
|
||||
//----------------------------------------
|
||||
|
||||
package main
|
||||
|
||||
import (
|
||||
@ -5,6 +13,7 @@ import (
|
||||
"fmt"
|
||||
"github.com/energye/energy/cef"
|
||||
"github.com/energye/energy/common/assetserve"
|
||||
"github.com/energye/energy/ipc"
|
||||
)
|
||||
|
||||
//go:embed resources
|
||||
@ -14,20 +23,49 @@ func main() {
|
||||
//全局初始化 每个应用都必须调用的
|
||||
cef.GlobalInit(nil, &resources)
|
||||
//创建应用
|
||||
cefApp := cef.NewApplication(nil)
|
||||
config := cef.NewApplicationConfig()
|
||||
config.SetMultiThreadedMessageLoop(false)
|
||||
config.SetExternalMessagePump(false)
|
||||
cefApp := cef.NewApplication(config)
|
||||
//指定一个URL地址，或本地html文件目录
|
||||
cef.BrowserWindow.Config.Url = "http://localhost:22022/index.html"
|
||||
cef.BrowserWindow.Config.IconFS = "resources/icon.ico"
|
||||
cef.BrowserWindow.Config.Title = "Energy 无边框可拖拽窗口"
|
||||
cef.BrowserWindow.Config.IconFS = "resources/icon.png"
|
||||
cef.BrowserWindow.Config.EnableHideCaption = true
|
||||
config := cef.BrowserWindow.Config.ChromiumConfig()
|
||||
config.SetEnableViewSource(true)
|
||||
cef.BrowserWindow.Config.Title = "Energy Vue + ElementUI 示例"
|
||||
chromiumConfig := cef.BrowserWindow.Config.ChromiumConfig()
|
||||
chromiumConfig.SetEnableMenu(false) //禁用右键菜单
|
||||
|
||||
ipc.IPC.Browser().SetOnEvent(func(event ipc.IEventOn) {
|
||||
//监听窗口状态事件
|
||||
event.On("window-state", func(context ipc.IIPCContext) {
|
||||
bw := cef.BrowserWindow.GetWindowInfo(context.BrowserId())
|
||||
state := context.Arguments().GetInt32(0)
|
||||
if state == 0 {
|
||||
fmt.Println("窗口最小化")
|
||||
bw.Minimize()
|
||||
} else if state == 1 {
|
||||
fmt.Println("窗口最大化/还原")
|
||||
bw.Maximize()
|
||||
}
|
||||
})
|
||||
//监听窗口关闭事件
|
||||
event.On("window-close", func(context ipc.IIPCContext) {
|
||||
bw := cef.BrowserWindow.GetWindowInfo(context.BrowserId())
|
||||
bw.CloseBrowserWindow()
|
||||
})
|
||||
})
|
||||
cef.BrowserWindow.SetBrowserInit(func(event *cef.BrowserEvent, window cef.IBrowserWindow) {
|
||||
//
|
||||
})
|
||||
//在主进程启动成功之后执行
|
||||
//在这里启动内置http服务
|
||||
//内置http服务需要使用 go:embed resources 内置资源到执行程序中
|
||||
cef.SetBrowserProcessStartAfterCallback(func(b bool) {
|
||||
fmt.Println("主进程启动 创建一个内置http服务")
|
||||
//通过内置http服务加载资源
|
||||
server := assetserve.NewAssetsHttpServer()
|
||||
server.PORT = 22022
|
||||
server.AssetsFSName = "resources" //必须设置目录名
|
||||
server.PORT = 22022 //服务端口号
|
||||
server.AssetsFSName = "resources" //必须设置目录名和资源文件夹同名
|
||||
server.Assets = &resources
|
||||
go server.StartHttpServer()
|
||||
})
|
||||
|
||||
BIN
example/browser-frameless/resources/icon.png
Normal file
BIN
example/browser-frameless/resources/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,47 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>browser-frameless</title>
|
||||
<style>
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
</script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
</head>
|
||||
<body style="overflow: hidden;margin: 0px;padding: 0px;width: 100%;text-align: center;border-color: brown">
|
||||
<div style="-webkit-app-region: drag;width: 700px;border: 1px solid #000000;height: 50px;">
|
||||
这是一个宽700px, 高50px的可拖拽窗口区域
|
||||
<a href="https://energy.yanghy.cn" style="-webkit-app-region:no-drag">这块区域内容可点击</a>
|
||||
</div>
|
||||
<h3>
|
||||
无边框可拖拽窗口<br>
|
||||
cef.BrowserWindow.Config.EnableHideCaption = true<br>
|
||||
-webkit-app-region: drag/no-drag
|
||||
</h3>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
</div>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
</div>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
</div>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
</div>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
</div>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
</div>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
</div>
|
||||
<div>
|
||||
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
|
||||
<body style="overflow: hidden;margin: 0px;padding: 0px;">
|
||||
<div id="app" v-cloak>
|
||||
<el-container style="height: 100vh; border: 1px solid #eee">
|
||||
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
||||
<el-menu :default-openeds="['1', '3']">
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>导航一</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="2">
|
||||
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="2-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="3-1">选项1</el-menu-item>
|
||||
<el-menu-item index="3-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="3-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="3-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="font-size: 12px;-webkit-app-region: drag;">
|
||||
<div style="width: 300px;float: left;">
|
||||
<span>窗口标题栏 VUE + ElementUI</span>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<el-dropdown style="-webkit-app-region: no-drag;">
|
||||
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>查看</el-dropdown-item>
|
||||
<el-dropdown-item>新增</el-dropdown-item>
|
||||
<el-dropdown-item>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<span style="-webkit-app-region: no-drag;">Energy</span>
|
||||
</el-dropdown>
|
||||
<span style="-webkit-app-region: no-drag;text-align: right;">
|
||||
<el-button size="mini" round @click="minWindow">最小化</el-button>
|
||||
<el-button size="mini" round @click="maxWindow">最大化</el-button>
|
||||
<el-button size="mini" round @click="closeWindow">关闭</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column prop="date" label="日期" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
<style>
|
||||
.el-header {
|
||||
background-color: #E4E7ED;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.$nextTick(function () {
|
||||
this.initTableData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initTableData: function () {
|
||||
const item = {
|
||||
date: '2022-02-22',
|
||||
name: 'energy',
|
||||
address: '北京市通州区'
|
||||
};
|
||||
this.tableData = Array(20).fill(item)
|
||||
},
|
||||
minWindow: function () {
|
||||
console.log('最小化窗口');
|
||||
ipc.emit("window-state", [0])
|
||||
},
|
||||
maxWindow: function () {
|
||||
console.log('最大化窗口');
|
||||
ipc.emit("window-state", [1])
|
||||
},
|
||||
closeWindow: function () {
|
||||
console.log('关闭窗口');
|
||||
ipc.emit("window-close")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user