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-09 23:43:12 +03:00
parent a0fa2798d9
commit 9f4cda9e64
25 changed files with 9394 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
public/data/id304.html Normal file
View File

@@ -0,0 +1,207 @@
<h1>Добавление диалогов</h1>
<h2>Диалог с сообщением</h2>
<p>
Некоторые ссылки в нашем приложении пока ведут в никуда и единственная реакция на щелчок по ним - это сообщение
в консоли, что не особо информативно, исправим этот недочёт. Создадим новый компонент MessageDialog.vue и, не
изобретая велосипедов, возьмём готовое решение для модального диалога из документации к Vuetify:
<a href="https://vuetifyjs.com/ru/components/dialogs" target="_blank">https://vuetifyjs.com/ru/components/dialogs</a>,
немного его модифицировав:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;template>
&lt;v-layout row justify-center>
&lt;v-dialog
v-model="dialog"
persistent
max-width="290"
>
&lt;v-card>
&lt;v-card-title class="headline">{{ title }}&lt;/v-card-title>
&lt;v-card-text>{{ text }}&lt;/v-card-text>
&lt;v-card-actions>
&lt;v-spacer>&lt;/v-spacer>
&lt;v-btn color="green darken-1" flat @click="dialog = false">Ok&lt;/v-btn>
&lt;/v-card-actions>
&lt;/v-card>
&lt;/v-dialog>
&lt;/v-layout>
&lt;/template>
&lt;script>
export default {
data () {
return {
dialog: false,
title: "",
text: ""
}
}
}
&lt;/script>
</pre>
</div>
</p>
<p>
Подключите диалог, добавив в блок <code>&lt;script>&lt;/script></code> файла App.vue строку
<code>import MessageDialog from './components/MessageDialog'</code> и ниже в <code>components: {}</code>
строку <code>MessageDialog</code>. Начало блока <code>&lt;sctipt>&lt;/script></code> должно выглядеть следующим
образом:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;script>
import MessageDialog from './components/MessageDialog'
import TOC from './components/TOC'
export default {
name: 'App',
components: {
MessageDialog,
TOC
},
</pre>
</div>
</p>
<p>
В конец блока <code>&lt;v-app>&lt;/v-app></code> добавьте строку
<code>&ltMessageDialog ref="MessageDialog" /></code>, после чего останется только в коде скрипта добавить
в секции .catch каждого обращения к Axios строки вызова нашего диалога с сообщением об ошибке:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
.catch(error => {
console.log(error);
this.$refs.MessageDialog.title = "Ошибка";
this.$refs.MessageDialog.text = error;
this.$refs.MessageDialog.dialog = true;
});
</pre>
</div>
Теперь все ошибки при загрузке файлов будут показаны пользователю.
</p>
<h2>Диалог с индикатором загрузки</h2>
<p>
При медленном соединении наше приложение будет загружать данные молча, ни коим образом не оповещая пользователя о
том, что оно работает, это нехорошо, давайте выводить при загрузке индикатор. Создадим компонент LoadingDialog.vue
как всегда воспользовавшись шаблоном vuetify:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;template>
&lt;div class="text-xs-center">
&lt;v-dialog
v-model="dialog"
hide-overlay
persistent
width="300"
>
&lt;v-card
color="primary"
dark
>
&lt;v-card-text>
Загружаю данные, ожидайте...
&lt;v-progress-linear
indeterminate
color="white"
class="mb-0"
>
&lt;/v-progress-linear>
&lt;/v-card-text>
&lt;/v-card>
&lt;/v-dialog>
&lt;/div>
&lt;/template>
&lt;script>
export default {
data () {
return {
dialog: false
}
},
watch: {
dialog (val) {
if (!val) return
}
}
}
&lt;/script>
</pre>
</div>
</p>
<p>
Предлагаю вам самостоятельно подключить его в App.vue, добавив нужные строки в блоки шаблона и скрипта. В шаблоне
значение ref установите равным "LoadingDialog".
</p>
<p>
Справились? Теперь добавим код для отображения и скрытия диалога при загрузке файла в секцию mounted:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
mounted () {
this.$refs.LoadingDialog.dialog = true;
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;
});
}
}
);
}
</pre>
</div>
</p>
<p>
Всё, теперь во время загрузки данных мы будем видеть сообщение с бегунком.
</p>
<p>
P.S. Текст данной части можно взять тут: <a href="../data/id304.html" target="_blank">/data/id304.html</a>
</p>
<p>
P.P.S. Финальную версию можно скомпилировать командой <code>yarn build</code>.
</p>