cai/VueJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Новые уроки и полировка кода

Browse Source
This commit is contained in:
Alexander I. Chebykin
2019-06-10 22:06:26 +03:00
parent 644a854843
commit 64d0c9568b
17 changed files with 594 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
public/data/id305.html Normal file
View File

@@ -0,0 +1,190 @@
<h1>Цветовые схемы</h1>
<p>
Наша программа получилась такая светлая-красивая, но в темноте пользоваться ей неудобно, яркий свет от экрана слишком бьёт по глазам, предлагаю
<s>перейти на тёмную сторону</s> сделать тёмный вариант интерфейса.
</p>
<p>
Открывайте основной модуль нашего приложения App.vue. В блоке <code>&lt;script></code> найдите секцию <code>data ()</code> и добавьте в неё переменную dark
со значением по умолчанию равным false, это будет флаг использования тёмной версии интерфейса. После этого в блоке <code>&lt;template></code> измените
<code>&lt;v-app></code> на <code>&lt;v-app :dark="dark"></code>, этим мы свяжем наш флаг использования тёмной версии с назначением соответствующего
CSS-класса главному элементу программы.
</p>
<p>
Попробуйте изменить в <code>data ()</code> значение переменной dark на true, ваше приложение станет тёмным. Получилось? Теперь прикрутим меню с пунктом для
переключения вариантов интерфейса, для этого в конец блока <code>&lt;v-toolbar></code> добавим следующий код:
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;v-menu bottom left>
&lt;template v-slot:activator="{ on }">
&lt;v-btn
flat
icon
v-on="on"
>
&lt;v-icon>more_vert&lt;/v-icon>
&lt;/v-btn>
&lt;/template>
&lt;v-list>
&lt;v-list-tile>
&lt;v-list-tile-action>
&lt;v-switch v-model="dark" color="blue">&lt;/v-switch>
&lt;/v-list-tile-action>
&lt;v-list-tile-title>Тёмная схема&lt;/v-list-tile-title>
&lt;/v-list-tile>
&lt;/v-list>
&lt;/v-menu>
</pre>
</div>
Теперь у нас есть переключатель темы, но при каждой повторной загрузке тема всегда включается светлая, реализуем сохранение значения флага в
cookies, для этого в блоке <code>&lt;script></code> добавим секцию <code>watch</code> с кодом, отслеживающим изменение флага dark и сохраняющим
его значение в localSorage:
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
watch: {
dark (val) { localStorage.dark = val; }
}
</pre>
</div>
</p>
<p>
Сохранение сделали, сделаем и чтение сохранённой информации, добавив в секцию <code>mounted</code> строку
<code>this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;</code>. После чего наш App.vue должен выглядеть следующим образом:
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;template>
&lt;v-app :dark="dark">
&lt;v-toolbar app>
&lt;v-toolbar-title class="headline text-uppercase">
&lt;span>Vue.js:&lt;/span>
&lt;span class="font-weight-light">Самоучитель&lt;/span>
&lt;/v-toolbar-title>
&lt;v-spacer>&lt;/v-spacer>
&lt;v-btn
flat
href="https://home.cainet.info:3000/cai/VueJS/"
target="_blank"
>
&lt;span class="mr-2">Актуальная версия&lt;/span>
&lt;/v-btn>
&lt;v-menu bottom left>
&lt;template v-slot:activator="{ on }">
&lt;v-btn
flat
icon
v-on="on"
>
&lt;v-icon>more_vert&lt;/v-icon>
&lt;/v-btn>
&lt;/template>
&lt;v-list>
&lt;v-list-tile>
&lt;v-list-tile-action>
&lt;v-switch v-model="dark" color="blue">&lt;/v-switch>
&lt;/v-list-tile-action>
&lt;v-list-tile-title>Тёмная схема&lt;/v-list-tile-title>
&lt;/v-list-tile>
&lt;/v-list>
&lt;/v-menu>
&lt;/v-toolbar>
&lt;v-content>
&lt;v-container fluid fill-height grid-list-md>
&lt;v-layout row wrap full-height>
&lt;v-flex sm4>
&lt;TOC ref="TOC" />
&lt;/v-flex>
&lt;v-flex sm8 v-html="text">&lt;/v-flex>
&lt;/v-layout>
&lt;/v-container>
&lt;/v-content>
&lt;LoadingDialog ref="LoadingDialog" />
&lt;MessageDialog ref="MessageDialog" />
&lt;/v-app>
&lt;/template>
&lt;script>
import LoadingDialog from './components/LoadingDialog'
import MessageDialog from './components/MessageDialog'
import TOC from './components/TOC'
export default {
name: 'App',
components: {
LoadingDialog,
MessageDialog,
TOC
},
data () {
return {
dark: false,
docId: 0,
text: ""
}
},
mounted () {
this.$refs.LoadingDialog.dialog = true;
this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;
this.axios.get("data/start.html")
.then(response => {
this.text = response.data;
this.$refs.LoadingDialog.dialog = false;
})
.catch(error => {
this.$refs.LoadingDialog.dialog = false;
console.log(error);
this.$refs.MessageDialog.title = "Ошибка";
this.$refs.MessageDialog.text = error;
this.$refs.MessageDialog.dialog = true;
});
this.$refs.LoadingDialog.dialog = true;
this.axios.get("data/toc.json")
.then(response => {
this.$refs.TOC.items = response.data;
this.$refs.LoadingDialog.dialog = false;
})
.catch(error => {
this.$refs.LoadingDialog.dialog = false;
console.log(error);
this.$refs.MessageDialog.title = "Ошибка";
this.$refs.MessageDialog.text = error;
this.$refs.MessageDialog.dialog = true;
});
this.$watch(
"$refs.TOC.active",
(newVal, oldVal) => {
if (newVal.length) {
this.$refs.LoadingDialog.dialog = true;
this.axios.get("data/id" + newVal + ".html")
.then(response => {
this.text = response.data;
this.$refs.LoadingDialog.dialog = false;
})
.catch(error => {
this.$refs.LoadingDialog.dialog = false;
console.log(error);
this.$refs.MessageDialog.title = "Ошибка";
this.$refs.MessageDialog.text = error;
this.$refs.MessageDialog.dialog = true;
});
}
}
);
},
watch: {
dark (val) { localStorage.dark = val; }
}
}
&lt;/script>
</pre>
</div>
</p>