Win10 UI 框架 Vue3

推荐 Vue 3 + Typescript + Vite + Using <script setup>

本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。

Demo|Demo|Demo

Usage

开发流程

推荐clone本仓库，在本仓库基础上修改，模版在/template目录下

1. 引入winVue租组件（clone可以跳过此步骤）

<WinVue></WinVue>
复制代码

import WinVue from "./components/win.vue";
复制代码

2. 在apps文件夹下新建vue文件，这个是窗口的内容

3. 在components/window/appconfig.ts下配置桌面的图标

格式：

{
    name: 图标名称,
    apptemp: 组件文件名,
    icon:public图标路径,
    width:宽度,
    height:高度
}
复制代码

Component 组件

建议在单独页面中加入以下组件

<WinVue></WinVue>
复制代码

import WinVue from "./components/win.vue";
复制代码

Class 类

DragWindow

引入DragWindow类
构造对象，使用后会在屏幕上显示一个窗口

import {DragWindow} from './components/window/libs/DragWindow'
import Help from './apps/Help.vue';
new DragWindow(100,100,'关于',200,100,{content:Help})

复制代码

DragWindow参数：

DragWindow(x:number,y:number,title:string,width:number,height:number,app:Object)
复制代码

名称	含义
x	左上角位置坐标x
y	左上角位置坐标y
title	窗口名称
width	窗口宽度
height	窗口高度
app	窗口的选项

app:{
    content:窗口的vue对象
    props:传递给vue对象的props
    use:挂载的插件的数组
}
复制代码

usage:

new DragWindow(0, 0, 'Admin后台管理', 300, 400, { content: AdmVue, use: [ElementPlus] })
复制代码

MenuIPC

这个类是单例模式，用于管理右键菜单（弹出菜单）。在引入MenuListVue组件后，可以在屏幕上调出菜单

调用类的静态成员函数getInstance获取实例

MenuIPC.getInstance():WindowIPC
复制代码

实例属性：

成员函数：

callMenu

callMenu(x:number,y:number,list:UnwrapNestedRefs<Array<menuItem>>)
复制代码

名称	含义
x	左上角位置坐标x
y	左上角位置坐标y
list	选项菜单数组

interface menuItem{
    name:string,
    func:Function
}
复制代码

usage:

MenuIPC.getInstance().callMenu(e.pageX, e.pageY,
        [
            { name: '关机', func: () => { 
                console.log("关机"); computerCTC.getInstance().closePower() } },
            { name: '重启', func: () => { 
                console.log("重启"); computerCTC.getInstance().restartPower() } }

        ]
    )
复制代码

WindowIPC

这个类是单例模式，用于集中管理窗口的状态信息。储存了窗口的状态HashMap

调用类的静态成员函数getInstance获取实例

WindowIPC.getInstance():WindowIPC
复制代码

实例属性：

pageMap: UnwrapNestedRefs<pageMapInter>;//窗口的hashMap
复制代码

成员函数：

getWinnum

getWinnum() 
复制代码

用于获取窗口编号

registerWindow

registerWindow(id: string, title: string):PageItem 
复制代码

注册一个窗口，需要id，标题

返回PageItem

PageItem：

interface PageItem {
    id: string,
    wid: number,
    title: string,
    zindex: number,
    ifShow: boolean,
    iftop: boolean,
    ifDestory: boolean,
    ifMax:boolean
}
复制代码

upSetWindowIndex

upSetWindowIndex(id: string):number
复制代码

将窗口移动到顶层

hideWindow

hideWindow(id: string)
复制代码

最小化一个窗口

showWindow

showWindow(id: string)
复制代码

显示窗口

destoryWindow

destoryWindow(id: string)
复制代码

销毁窗口

maxWindow

maxWindow(id: string) 
复制代码

最大化窗口

on

on(ev:string,func:Function)
复制代码

注册一个事件

emit

emit(ev:string,...args:any)
复制代码

触发一个事件