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

21
public/data/id302.html
View File

@@ -6,7 +6,7 @@
<p>
А ненужное - это компонент HelloWorld и все ссылки на него. Смело удаляйте файл HelloWorld.vue из каталога
<code>src/components/</code>, а файл App.vue приведите к следующему виду:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;template>
&lt;v-app>
@@ -44,13 +44,18 @@
</pre>
</div>
</p>
<p>
Наш компонент будет использовать Material Design Icons, потому начнём с того, что подключим их. Для это выполните команду <kbd>yarn add @mdi/font</kbd>,
а после того как пакет установится, добавьте в самое начало файла main.js строку <code>import '@mdi/font/css/materialdesignicons.css'</code>. Всё, теперь
можно переходить к написанию самого компонента.
</p>
<p>
Vuetify неплохо документирован и имеет множество примеров, одним из них мы и воспользуемся при создании компонента
оглавления. За основу возьмём один из примеров со страницы
<a href="https://next.vuetifyjs.com/ru/components/treeview" target="blank">https://next.vuetifyjs.com/ru/components/treeview</a> и
приведём его к следующему виду:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;template>
&lt;v-card class="mx-auto">
@@ -88,7 +93,7 @@
&lt;template v-slot:prepend="{ item }">
&lt;v-icon
v-if="item.children"
v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
v-text="`mdi-${open ? 'book-open-variant' : 'book-variant'}`"
>
&lt;/v-icon>
&lt;/template>
@@ -142,7 +147,7 @@
недоразумение добавлением в блок <code>&lt;script>&lt;/script></code> строки
<code>import TOC from './components/TOC'</code> и чуть ниже в <code>components: {},</code> строку
<code>TOC</code>. В итоге App.vue должен выглядеть следующим образом:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;template>
&lt;v-app>
@@ -193,15 +198,15 @@
текста. Про двенадцатиточечную систему сеток Vutify можно прочитать тут:
<a href="https://vuetifyjs.com/ru/framework/grid" target="_blank">https://vuetifyjs.com/ru/framework/grid</a>.
Приведём блок &lt;v-content>&lt;/v-content> к следующему виду:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;v-content>
&lt;v-container fluid fill-height grid-list-md>
&lt;v-layout row wrap full-height>
&lt;v-flex sm4>
&lt;v-flex sm5 md4 lg3>
&lt;TOC/>
&lt;/v-flex>
&lt;v-flex sm8 v-html="text">&lt;/v-flex>
&lt;v-flex sm7 md8 lg9 v-html="text">&lt;/v-flex>
&lt;/v-layout>
&lt;/v-container>
&lt;/v-content>
@@ -219,7 +224,7 @@
вылезут за пределы блока меню... Непорядок! К счастью, исправить сиё недоразумение несложно, просто добавьте в
наш компонент (TOC.vue) блок стилей:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;style>
.v-treeview-node__content, .v-treeview-node__label {