VueJS/public/data/id302.html

<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>
&lt;template>
    &lt;v-app>
        &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://github.com/vuetifyjs/vuetify/releases/latest"
                target="_blank"
            >
                &lt;span class="mr-2">Актуальная версия</span>
            &lt;/v-btn>
        &lt;/v-toolbar>

        &lt;v-content>
        &lt;/v-content>
    &lt;/v-app>
&lt;/template>

&lt;script>
    export default {
        name: 'App',
        components: {
        },
        data () {
            return {
            }
        }
    }
&lt;/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>
&lt;template>
    &lt;v-card class="mx-auto">
        &lt;v-sheet class="pa-3 primary lighten-2">
            &lt;v-text-field
                v-model="search"
                label="Поиск по названию главы"
                dark
                flat
                solo-inverted
                hide-details
                clearable
                clear-icon="mdi-close-circle-outline"
            >
            &lt;/v-text-field>
            &lt;v-checkbox
                v-model="caseSensitive"
                dark
                hide-details
                label="С учётом регистра"
            >
            &lt;/v-checkbox>
        &lt;/v-sheet>
        &lt;v-card-text>
            &lt;v-treeview
                :active.sync="active"
                :filter="filter"
                :items="items"
                :open.sync="open"
                :search="search"
                activatable
                active-class="primary--text"
                open-on-click
            >
                &lt;template v-slot:prepend="{ item }">
                    &lt;v-icon
                        v-if="item.children"
                        v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
                    >
                    &lt;/v-icon>
                &lt;/template>
            &lt;/v-treeview>
        &lt;/v-card-text>
    &lt;/v-card>
&lt;/template>

&lt;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
            }
        }
    }
&lt;/script>
        </pre>
    </div>
</p>
<p>
    Компонент готов, но если вы запустите приложение на исполнение, то никаких изменений не увидите, ведь мы не
    добавили его в само приложение. Этим сейчас и займёмся. Откройте файл App.vue и в блок <code>&lt;v-content>
    &lt;/v-content></code> добавьте наш компонент <code>&lt;TOC/></code>. Уже запустили просмотр? Ну и как?
    Ничего нового? А всё потому, что мы не импортировали его в приложение, срочно исправляем это досадное
    недоразумение добавлением в блок <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;">
        <pre>
&lt;template>
    &lt;v-app>
        &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://github.com/vuetifyjs/vuetify/releases/latest"
                target="_blank"
            >
                &lt;span class="mr-2">Актуальная версия</span>
            &lt;/v-btn>
        &lt;/v-toolbar>

        &lt;v-content>
            &lt;TOC/>
        &lt;/v-content>
    &lt;/v-app>
&lt;/template>

&lt;script>
    import TOC from './components/TOC'

    export default {
        name: 'App',
        components: {
            TOC
        },
        data () {
            return {
            }
        }
    }
&lt;/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>.
    Приведём блок &lt;v-content>&lt;/v-content> к следующему виду:
    <div class="grey lighten-2" 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;TOC/>
            &lt;/v-flex>
            &lt;v-flex sm8 v-html="text">&lt;/v-flex>
        &lt;/v-layout>
    &lt;/v-container>
&lt;/v-content>
    </pre>
</div>
</p>
<p>
    В блок <code>data()</code> добавьте строку <code>text: ""</code> так как выше, в строке
    <code>&lt;v-flex sm8 v-html="text">&lt;/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>
&lt;style>
    .v-treeview-node__content, .v-treeview-node__label {
        flex-shrink: 1;
    }
    .v-treeview-node__root {
        height: auto;
    }
&lt;/style>
        </pre>
    </div>
</p>
<p>
    Отлично! Теперь всё выглядит как надо и можно переходить к следующему шагу.
</p>