提交 a2226dd9 编写于 作者: yanghye's avatar yanghye

demos: 无标题和边框窗口示例

上级 b8cfbc1b
//----------------------------------------
//
// 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()
})
......
<!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>&nbsp;
</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>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册