Использовать компоненты вю, как один-офф в макет леса


Я недавно получил в VueJS и сетки CSS. В прошлом я всегда использовал фреймворки, такие как Bootstrap по причине моего макета. Однако с помощью CSS сеток и VueJS привлекли мое внимание, я пытаюсь построить адаптивный макет страницы с помощью обоих.

Теперь мой вопрос, можно (или даже нужно) вообще использовать компоненты вю для основного макета? Я построил off-холст навигации для небольших точек зрения и превратили его в компонент вю:

гамбургер.вю:

<template>
    <div class="hamburger">
        <div class="bar" :class="{ 'bar-top' : this.text }"></div>
        <div class="bar" :class="{ 'bar-middle' : this.text }"></div>
        <div class="bar" :class="{ 'bar-bottom' : this.text }"></div>
    </div>
</template>

<script>
    export default {
        props: ['text']
    }
</script>

<style lang="scss" scoped>
    @import "../../../sass/core/_variables";

    .hamburger {
        position: absolute;
        right: 15px;
        top: 15px;
        display: block;
        cursor: pointer;
        transition: transform .7s ease-in-out;

        @media only screen and (min-width: $tablet) {
            display: none;
        }
    }
    .bar {
        width: 30px;
        height: 4px;
        margin-bottom: 5px;
        background-color: #000000;
        border-radius: 3px;
        transition: all .7s ease;
    }
    .bar:last-child {
        margin-bottom: 0px;
    }
    .bar-top {
        transform: translateY(9px) rotateZ(45deg);
    }
    .bar-middle {
        opacity: 0;
    }
    .bar-bottom {
        transform: translateY(-10px) rotateZ(-45deg);
    }
</style>

И я это в моей основной макет вот так:

<div id="root">
        <header role="banner" :class="{ 'nav-open' : mobile }">
            <div class="container">
                <h2>Header</h2>
                <hamburger :text="mobile" @click.native="mobile = !mobile"> </hamburger>
            </div>
            <section class="hero is-dark is-bold">
                <div class="hero-body">
                    <div class="container">
                        <h1 class="title">Hero title</h1>
                        <h2 class="subtitle">Hero subtitle</h2>
                    </div>
                </div>
            </section>
        </header>
        <nav role="navigation" :class="{ 'nav-open' : mobile }">
            <div class="container">
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                </ul>
            </div>
        </nav>
        <section id="main" :class="{ 'nav-open' : mobile }">
            <main role="main">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </main>
            <aside>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
            </aside>
        </section>
        <footer role="footer" :class="{ 'nav-open' : mobile }">
            <div class="container">
                <h2>Footer</h2>
            </div>
        </footer>
    </div>

Так как она работает, на мой вю экземпляр я mobile = falseтогда, нажав на гамбургер, я могу изменить его, и поэтому переход off-холст навигации в.

навигация.СКС:

@media only screen and (min-width: $tablet) {
    ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, auto));
        > li {
            margin: 0 auto;
        }
    }
    .toggle {
        display: none;
    }
}

@media only screen and (max-width: $tablet - 1px) {
    nav {
        position: fixed;
        top: 0;
        bottom: 0;
        width: $nav;
        right: -$nav;
    }
    nav,
    header,
    section#main,
    footer {
        transition: transform .7s ease-in-out;
    }
    .nav-open {
        transform: translateX(-$nav);
    }
}

Мой основной макет.СКС:

/*! Mobile View */

#root {
    display: grid;
    grid-template-columns: 1fr;
}

/*! Desktop View */

#root > section #main {
    margin: 0 auto;
    @media only screen and (min-width: $tablet) {
        display: grid;
        grid-column-gap: 20px;
        grid-template-columns: repeat(10, 1fr);
        main {
            grid-column: span 7;
        }
        aside {
            grid-column: span 3;
        }
    }
    @media only screen and (min-width: $desktop) {
        width: 90%;
    }
}

Очевидно, что это просто монтаж. В конце концов я не уверена в 3 вещах:

  • Я должен держать мобильный / off-холст навигации в качестве компонента вю, или включить в свой макет СКС файлы? Я сделал это, потому что таким образом все укладки, JavaScript и HTML-код содержится в одном файле. С другой стороны, как я узнал, нужно создать компонент, если кто-то хочет использовать определенный кусок кода более чем один раз, что я явно не здесь. Я только использовать его один раз. Это все еще жизнеспособной (в плане производительности)?

  • Одна вещь, которую я вы не уверены, является :class="{ 'nav-open' : mobile }" в моей разметке. Как мне построить это, я уже повторяю это несколько раз в моей разметке (только для скольжения в off-холст навигации, а также три раза для скольжения (справа) заголовок, основную часть и футер). Это тавтология, но я не знаю, если это может быть сделано лучше.

  • Вы бы настроили сетку аналогичным образом с помощью таблиц CSS, или я должен что-то менять? Я пытался эшафот с мобильного-сначала в ум, в то же время как минимальный / производительным, насколько это возможно.



Комментарии