Vue3 仿Win10 UI 框架
推荐 Vue 3 + Typescript + Vite + Using <script setup>
本框架可以让你的页面像win10视窗系统一样,变为一个网页上的win10系统。
- 安装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文件,主要在此文件夹中编写窗口内容(非必须)
欢迎PR,意见,想法,感谢各位大佬的支持
|-- packages
|-- appconfig.ts // APP的配置
|-- init.ts // 初始化过程
|-- main.css // 全局css
|-- Win.vue // Win10组件
|-- window // Win10逻辑
|-- builtin // 内建的页面,设置等
| |-- appInfo.vue
| |-- callSystemWins.ts
| |-- systemSet.vue
| |-- setApps
| | |-- setStyle.scss
| | |-- SetSystemset.vue
| | |-- SetVersion.vue
| |-- winComponent
| |-- WinButton.vue
| |-- WinCheckBox.vue
| |-- WinRadio.vue
| |-- WinSelect.vue
|-- libs // 主要依赖
| |-- GlobalOps.ts
| |-- ContextMenu.ts
| |-- Notify.ts
| |-- Power.ts
| |-- WindowTmp.vue
| |-- Dom // Dom操作
| | |-- DragElement.ts
| | |-- ScaleElement.ts
| |-- DragWindow // 窗口
| | |-- index.ts
| | |-- option.ts
| |-- DWM // 窗口管理中心
| | |-- DWM.ts
| | |-- index.ts
| | |-- PrivateDWM.ts
| | |-- type.ts
| |-- WindowTemplate // 窗口模板
| |-- getCom.ts
| |-- statebarButton.vue
| |-- windowInner.vue
| |-- defaultInner
| |-- error.vue
| |-- loadding.vue
|-- state // 集中状态管理
| |-- index.ts
| |-- listener.ts
| |-- type.ts
|-- structure // Win所必需的结构
|-- Alert.vue
|-- ContextMenu.vue
|-- Desktop.vue
|-- DragWindow.vue
|-- LockScreen.vue
|-- Magnet.vue
|-- TaskBar.vue
|-- WindowsGroup.vue
|-- background
| |-- default.vue
| |-- imgbackground.vue
| |-- index.vue
|-- status
| |-- black.vue
| |-- blue.vue
| |-- index.vue
|-- taskbarIcon
|-- charging.vue
|-- network.vue