vuejs os template
v0.1.0
| Tema de plano | Tema do Windows | Tema macOS |
|---|---|---|
 |  |  |
Este projeto tem como objetivo criar um modelo interativo do sistema operacional para o VUE. Incluídos no modelo estão toda a lógica necessária para componentes individuais da janela, barbas navais e grades de aplicativos. Os usuários podem registrar novos componentes (personalizados ou não) facilmente.
Baixe o lançamento mais recente da lateral desta página
Certifique -se de ter vue.js instalado
Documentação Oficial de Vue
Renomeie a pasta para vuejs-os-template
CD na pasta do projeto e nos pacotes de instalação + dependências
$ cd vuejs-os-template && npm install$ npm run serveO registro de uma janela com o método de slots permitirá acesso rápido ao modelo de janela pré-fabricado. Este método é mais adequado para usuários que não exigem nenhuma alteração no estilo ou layout da própria janela.
Vá para /src/store/index.js
Registre uma nova janela colando o seguinte snippet dentro da matriz do Windows State
{
windowId : "UniqueWindowID" ,
windowState : "close" ,
displayName : "Unique Window" ,
windowComponent : 'window' ,
windowContent : 'Placeholder' ,
windowContentPadding : {
top : null ,
right : null ,
bottom : null ,
left : null
} ,
position : "absolute" ,
positionX : "10vw" ,
positionY : "10vh" ,
iconImage : "placeholder.png" ,
altText : "Placeholder Icon" ,
fullscreen : false
} ,windowId: "MyNewWindow" displayName: "New Window"/src/components/views pasta e substituir 'windowcontent' pelo nome do novo componente de conteúdo criado. windowContent: "MyNewWindowContent"/src/components/Views/mynewwindowcontent.vue
< template >
< p > this is my new window's content! </ p >
</ template >/src/App.vue para importar e registrar os novos componentes na seção <Script>. import MyNewWindowContent from './components/views/MyNewWindowContent' components: {
... ,
MyNewWindowContent
}O registro de uma janela personalizado também é relativamente simples devido a cada janela ter um estado de objeto dedicado que rastreia a janela para apresentar. Você pode registrar uma janela personalizada se o layout ou o estilo da janela precisarem ser modificados (ou seja, remoção ou adição de botões na barra superior da janela).
Vá para /src/store/index.js
Registre uma nova janela colando o seguinte snippet dentro da matriz do Windows State
{
windowId : "UniqueWindowID" ,
windowState : "close" ,
displayName : "Unique Window" ,
windowComponent : 'window' ,
windowContent : 'Placeholder' ,
windowContentPadding : {
top : null ,
right : null ,
bottom : null ,
left : null
} ,
position : "absolute" ,
positionX : "10vw" ,
positionY : "10vh" ,
iconImage : "placeholder.png" ,
altText : "Placeholder Icon" ,
fullscreen : false
} ,windowId: "MyCustomWindow" displayName: "Custom Window" windowComponent: 'SpecialWindow'
Crie um novo componente de janela chamado SpecialWindow.vue em /src/components/template e copie o conteúdo da janela.vue nesse novo arquivo .
Para fins de demonstração, simplesmente alteraremos o plano de fundo da 'barra superior' da janela e adicionaremos algum conteúdo que substitui a seção de slot.
Cole este trecho CSS na seção de estilo.
. top-bar {
background-color : green !important ;
}Substitua as tags de slot por este trecho de HTML.
< p > This is my new custom window </ p >/src/App.vue para importar e registrar os novos componentes na seção <Script>. import SpecialWindow from './components/template/SpecialWindow' components: {
... ,
SpecialWindow
}Incluídos no modelo estão três temas diferentes, o tema do projeto padrão, um tema MacOS e um tema do Windows. A alternância entre os temas é tornada relativamente fácil, mas certos temas podem exigir pequenos ajustes.
/src/App.vue , na seção de script, importe a variante da barra de azia. import Navbar from './components/blueprint/Navbar' @import './assets/css/blueprint/app.css' ;
@import './assets/css/blueprint/window.css' ;
@import './assets/css/blueprint/appgrid.css' ;/src/App.vue , na seção de script, importe a variante do Windows Navbar. import Navbar from './components/windows/Navbar' @import './assets/css/windows/app.css' ;
@import './assets/css/windows/window.css' ;
@import './assets/css/windows/appgrid.css' ;/src/App.vue , na seção de script, importe a variante MacOS Navbar e o MacOS Top Navbar . import Navbar from './components/macos/Navbar'
import TopNavbar from './components/macos/TopNavbar.vue'components: {
... ,
TopNavbar
} `` `
3. Under the style section of App.vue, import the MacOS CSS variant.
` `` css
@ import './assets/css/macos/app.css' ;
@ import './assets/css/macos/window.css' ;
@ import './assets/css/macos/appgrid.css' ; | Nome | Descrição | Tipo |
|---|---|---|
| WindowID | ID exclusivo para identificar uma janela | Corda |
| WindowState | Rastreia o estado aberto, fechado ou minimizado da Window | Corda |
| nome de exibição | Etiqueta para janela no título da grade de aplicativos e da janela | Corda |
| WindowComponent | A interface do usuário da própria janela pode ser alterada para usar uma janela personalizada, consulte a seção de registro de janela personalizada | Corda |
| WindowContent | Rastreia o componente de conteúdo da Window, será inserido em slots se estiver usando a janela padrão, consulte o registro de Windows com seção de slots | Corda |
| WindowContentPadding | Define o preenchimento de conteúdo dentro da janela | String ou nulo |
| posição | Define a posição CSS da janela | Corda |
| POSITIONX | Define o deslocamento inicial X da janela | Corda |
| positiony | Define o deslocamento Y de Janela | Corda |
| iconimage | Nome da imagem do ícone da janela, os ícones devem ser colocados em /assets/icons/ | Corda |
| altText | Texto alternativo do ícone | Corda |
| tela cheia | Rastreia se uma janela está em tela cheia ou não | Booleano |
/assets/css/ , enlouqueça com isso!
