vuejs os template
v0.1.0
| ТЕМА ПЛИне | Тема Windows | Макос Тема |
|---|---|---|
 |  |  |
Этот проект направлен на создание интерактивного шаблона веб -ОС для Vue. Все в шаблоне включены необходимые логики для отдельных компонентов окна, Navbars и App Grids. Пользователи могут легко зарегистрировать новые компоненты (пользовательские или иным образом).
Загрузите последний релиз с боковых носителей этой страницы
Убедитесь, что у вас установлен Vue.js
Официальная документация от Vue
Переименовать папку в vuejs-os-template
CD в папку проекта и установить пакеты + зависимости
$ cd vuejs-os-template && npm install$ npm run serveРегистрация окна с помощью метода слотов позволит вам быстро получить доступ к предварительно изготовленному шаблону окна. Этот метод наиболее подходит для пользователей, которым не требуется никаких изменений в стиле или макете самого окна.
Отправляйтесь в /src/store/index.js
Зарегистрируйте новое окно, вставив следующий фрагмент в массиве состояний Windows
{
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 и замените «WindowContent» на имя созданного нового содержимого компонента. windowContent: "MyNewWindowContent"/src/components/views/mynewwindowcontent.vue
< template >
< p > this is my new window's content! </ p >
</ template >/src/App.vue , чтобы импортировать и зарегистрировать новые компоненты в разделе <Script>. import MyNewWindowContent from './components/views/MyNewWindowContent' components: {
... ,
MyNewWindowContent
}Регистрация пользовательского окна также сделана относительно простой из -за каждого окна, имеющего выделенное состояние объекта, отслеживающее окно. Возможно, вы захотите зарегистрировать пользовательское окно, если необходимо изменить макет или стиль самого окна (то есть удаление или добавление кнопок в верхней панели окна).
Отправляйтесь в /src/store/index.js
Зарегистрируйте новое окно, вставив следующий фрагмент в массиве состояний Windows
{
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'
Создайте новый компонент окна с именем SpecialWindow.vue под /src/components/template и скопируйте содержимое window.vue в этот новый файл .
Для демонстрационных целей мы просто изменим фон «верхнего бара» окна и добавим некоторый контент, заменяющий раздел слота.
Вставьте этот фрагмент CSS в раздел стиля.
. top-bar {
background-color : green !important ;
}Замените метки слота этим фрагментом HTML.
< p > This is my new custom window </ p >/src/App.vue , чтобы импортировать и зарегистрировать новые компоненты в разделе <Script>. import SpecialWindow from './components/template/SpecialWindow' components: {
... ,
SpecialWindow
}В шаблон включены три разных тема, тема плана по умолчанию, тема MacOS и тема Windows. Переключение между темами сделано относительно простым, но определенные темы могут потребовать незначительной настройки.
/src/App.vue , под разделом сценария, импортируйте вариант Navbar Blueprint. 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 , под разделом скрипта импортируйте вариант 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 , под разделом сценария, импортируйте вариант MacOS Navbar и Top Navbar MacOS . 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' ; | Имя | Описание | Тип |
|---|---|---|
| Windowid | Уникальный идентификатор для идентификации окна | Нить |
| Windowstate | Отслеживает открытое, закрытое или минимизированное состояние окна | Нить |
| отображаемое имя | Метка для окна в приложении и заголовке заголовка окна | Нить |
| WindowComponent | Собственный пользовательский интерфейс Window может быть изменен, чтобы использовать пользовательское окно, см. | Нить |
| Windowncontent | Компонент содержимого окна «Отслеживает», будет вставлен в слотах при использовании стандартного окна, см. Регистрацию Windows с разделом слотов | Нить |
| WindowContentPadding | Устанавливает заполнение контента в окне | Строка или нулевой |
| позиция | Устанавливает положение CSS окна | Нить |
| позиция | Устанавливает начальное x смещение окна | Нить |
| позиционированный | Устанавливает интенсивное смещение окна | Нить |
| иконив | Название изображения окна значка, значки должны быть размещены в /assets/icons/ | Нить |
| альттекс | Альтернативный текст значка | Нить |
| полноэкранный | Отслеживает, находится ли окно в полноэкранном режиме или нет | Логический |
/assets/css/ , сходите с ним!
