模仿Win10 UI 框架 Vue3

炎魔之王

已于 2024-03-19 18:20:43 修改

阅读量1.4k

点赞数 1

文章标签： vue js javascript vue.js typescript

于 2021-08-10 20:33:08 首次发布

本文链接：https://blog.csdn.net/qq_41636947/article/details/119578625

版权

本文档介绍了如何使用Vue3、Typescript和Vite构建一个模仿Windows 10 UI的框架。该框架允许开发者创建网页应用，使其具有类似Win10系统的视觉效果。包括添加桌面图标、拖动窗口、右键菜单等功能，并提供了详细的使用教程和示例代码。

摘要由CSDN通过智能技术生成

请添加图片描述

vue3-win10

Vue3 仿Win10 UI 框架

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

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

Demo|Demo|Demo

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

Vue3支持
推荐 Vue 3 + Typescript + Vite

方便快捷
使用原本的Vue开发方式即可

Usage

开发流程

安装vue3-win10

npm install vue3-win10

在vue中use插件

通过’vue3-win10’引入插件

import win10 from 'vue3-win10';

引入样式文件"vue3-win10/distlib/style.css"

import "vue3-win10/distlib/style.css"

use

import { createApp } from 'vue'
import App from './App.vue'
import win10 from 'vue3-win10';
import "vue3-win10/distlib/style.css"

createApp(App).use(win10).mount('#app')

在页面中引入Win10租组件

<Win10></Win10>

此步骤之后，run dev已经可以看到win10启动了

控制屏幕🖥大小

在组件外围包裹一个outer

  <div class="outer">
    <Win10></Win10>
  </div>

定义outer样式

<style scoped>
.outer {
  width: 100vw;
  height: 100vh;
}
</style>

这样就是占据全部页面显示

在apps文件夹下新建vue文件，主要在此文件夹中编写窗口内容（非必须）

Component 组件

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

<Win10></Win10>

Function 函数

AddToDesktop

interface appInfo{
    name: string,
    apptemp: string,
    icon:string,
    width:number,
    height:number,
    tmp:ReturnType<typeof defineComponent>
}

AddToDesktop(app:appInfo)

将一个app添加到桌面图标中

appInfo:{
    name: 标题,
    apptemp: --已废弃属性--,
    icon:图标素材,
    width:窗口打开宽度,
    height:窗口打开高度,
    tmp:引入的Vue文件
}

ClearDesktop

ClearDesktop()

用于清空桌面图标

Class 类

DragWindow

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

import {DragWindow} from 'vue3-win10'
import Help from './apps/Help.vue';
new DragWindow(100,100,'关于',200,100,{content:Help})

DragWindow参数：

interface ctxPar{
    content:ReturnType<typeof defineComponent>,
    props?:any
}

DragWindow(x:number,y:number,title:string,width:number,height:number,ctxpar:ctxPar,use:Array)

名称	含义
x	左上角位置坐标x
y	左上角位置坐标y
title	窗口名称
width	窗口宽度
height	窗口高度
app	窗口的选项
use	需要使用到的插件

ctxPar:{
    content:ReturnType<typeof defineComponent>,//:窗口的vue对象
    props?:any//:传递给vue对象的props
}

usage:

new DragWindow(0, 0, 'Admin后台管理', 300, 400, { content: AdmVue }, [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

成员函数：

registerWindow (new DragWindow时调用此方法)

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,
    width:number,
    height:number,
    content:DefineComponent<{}, {}, any>,
    props:any,
    appPointer: App|null
}