Первоначальная версия
This commit is contained in:
237
public/data/id302.html
Normal file
237
public/data/id302.html
Normal file
@@ -0,0 +1,237 @@
|
||||
<h1>Создание компонента оглавления</h1>
|
||||
<p>
|
||||
Первое что мы сделаем в нашем проекте - это компопнент оглавления с поиском главы, тот что вы видите сейчас слева
|
||||
от данного текста. Но сначала удалим всё ненужное из сгенерированного на предыдущем шаге шаблона.
|
||||
</p>
|
||||
<p>
|
||||
А ненужное - это компонент HelloWorld и все ссылки на него. Смело удаляйте файл HelloWorld.vue из каталога
|
||||
<code>src/components/</code>, а файл App.vue приведите к следующему виду:
|
||||
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
|
||||
<pre>
|
||||
<template>
|
||||
<v-app>
|
||||
<v-toolbar app>
|
||||
<v-toolbar-title class="headline text-uppercase">
|
||||
<span>Vue.js:</span>
|
||||
<span class="font-weight-light">Самоучитель</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
flat
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="mr-2">Актуальная версия</span>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-content>
|
||||
</v-content>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</pre>
|
||||
</div>
|
||||
</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;">
|
||||
<pre>
|
||||
<template>
|
||||
<v-card class="mx-auto">
|
||||
<v-sheet class="pa-3 primary lighten-2">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
label="Поиск по названию главы"
|
||||
dark
|
||||
flat
|
||||
solo-inverted
|
||||
hide-details
|
||||
clearable
|
||||
clear-icon="mdi-close-circle-outline"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-checkbox
|
||||
v-model="caseSensitive"
|
||||
dark
|
||||
hide-details
|
||||
label="С учётом регистра"
|
||||
>
|
||||
</v-checkbox>
|
||||
</v-sheet>
|
||||
<v-card-text>
|
||||
<v-treeview
|
||||
:active.sync="active"
|
||||
:filter="filter"
|
||||
:items="items"
|
||||
:open.sync="open"
|
||||
:search="search"
|
||||
activatable
|
||||
active-class="primary--text"
|
||||
open-on-click
|
||||
>
|
||||
<template v-slot:prepend="{ item }">
|
||||
<v-icon
|
||||
v-if="item.children"
|
||||
v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
|
||||
>
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-treeview>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
active: [],
|
||||
items: [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Введение"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Подготовка среды разработки",
|
||||
"children": [
|
||||
{
|
||||
"id": 201,
|
||||
"name": "Программное обеспечение"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
open: [1],
|
||||
search: null,
|
||||
caseSensitive: false
|
||||
}),
|
||||
|
||||
computed: {
|
||||
filter () {
|
||||
return this.caseSensitive
|
||||
? (item, search, textKey) => item[textKey].indexOf(search) > -1
|
||||
: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</pre>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
Компонент готов, но если вы запустите приложение на исполнение, то никаких изменений не увидите, ведь мы не
|
||||
добавили его в само приложение. Этим сейчас и займёмся. Откройте файл App.vue и в блок <code><v-content>
|
||||
</v-content></code> добавьте наш компонент <code><TOC/></code>. Уже запустили просмотр? Ну и как?
|
||||
Ничего нового? А всё потому, что мы не импортировали его в приложение, срочно исправляем это досадное
|
||||
недоразумение добавлением в блок <code><script></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;">
|
||||
<pre>
|
||||
<template>
|
||||
<v-app>
|
||||
<v-toolbar app>
|
||||
<v-toolbar-title class="headline text-uppercase">
|
||||
<span>Vue.js:</span>
|
||||
<span class="font-weight-light">Самоучитель</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
flat
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="mr-2">Актуальная версия</span>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-content>
|
||||
<TOC/>
|
||||
</v-content>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TOC from './components/TOC'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
TOC
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</pre>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
Запустили? Круто же? =) Идём дальше.
|
||||
</p>
|
||||
<p>
|
||||
Нам надо чтобы оглавление было во всю ширину экрана только на смартфонах, на компьютере это выглядит как минимум
|
||||
странно, изменим разметку в файле App.vue, создадим одну колонку шириной 4 для оглавления и одну шириной 8 для
|
||||
текста. Про двенадцатиточечную систему сеток Vutify можно прочитать тут:
|
||||
<a href="https://vuetifyjs.com/ru/framework/grid" target="_blank">https://vuetifyjs.com/ru/framework/grid</a>.
|
||||
Приведём блок <v-content></v-content> к следующему виду:
|
||||
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
|
||||
<pre>
|
||||
<v-content>
|
||||
<v-container fluid fill-height grid-list-md>
|
||||
<v-layout row wrap full-height>
|
||||
<v-flex sm4>
|
||||
<TOC/>
|
||||
</v-flex>
|
||||
<v-flex sm8 v-html="text"></v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</pre>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
В блок <code>data()</code> добавьте строку <code>text: ""</code> так как выше, в строке
|
||||
<code><v-flex sm8 v-html="text"></v-flex></code> мы директивой <code>v-html="text"</code> указали Vue, что
|
||||
оон должен в качестве содержимого блока брать значение свойства text, и если мы его не добавим в объект нашего
|
||||
приложения, то Vue будет ругаться нехорошими словами.
|
||||
</p>
|
||||
<p>
|
||||
Готово! Почти идеально... Почему почти? Попробуйте уменьшить размер окна браузера и на определённом этапе буквы
|
||||
вылезут за пределы блока меню... Непорядок! К счастью, исправить сиё недоразумение несложно, просто добавьте в
|
||||
наш компонент (TOC.vue) блок стилей:
|
||||
|
||||
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
|
||||
<pre>
|
||||
<style>
|
||||
.v-treeview-node__content, .v-treeview-node__label {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.v-treeview-node__root {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
</pre>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
Отлично! Теперь всё выглядит как надо и можно переходить к следующему шагу.
|
||||
</p>
|
||||
Reference in New Issue
Block a user