web-dev-qa-db-ja.com

NavMenuはelement-uiで応答できますか？

私はvue.jsとelement-uiコンポーネントに基づいてレスポンシブなSPAを作成しようとしています。それは箱から出してすぐにレスポンシブレイアウトになり、正常に動作しますが、モバイルデバイスでNavMenu（el-menu）コンポーネントを上に移動したり、「ハンバーガー」の下に非表示にする方法を理解できません。
現在の結果は、コンテンツの上の垂直メニューにすぎないため、しばらく下にスクロールする必要があります。
私のapp.vueレイアウト：

<el-row>
    <el-col>
        <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="6">
                <img src="/Assets/images/logo.png" width="64px" align="left" />
                <h2>Admin</h2>
            </el-col>
            <el-col :span="2">
                <sign-in></sign-in>
            </el-col>
        </el-row>
        <el-row :Gutter="10">
            <el-col :xs="3" :lg="8" :xl="3">
                <el-menu v-if="user.authenticated" style="min-height: 960px; background-color: #fff" v-bind:router="true">
                    <el-menu-item index="/offers">
                        <i class="el-icon-star-off"></i>
                        <span>Offers</span>
                    </el-menu-item>
                    ...
                </el-menu>
            </el-col>
            <el-col :xs="21" :lg="16" :xl="21">
                <router-view style="width:100%;"></router-view>
            </el-col>
        </el-row>
    </el-col>
</el-row>
responsive-designvue.jsvuejs2element-ui
9
IDeveloper

Element は、モバイルプラットフォーム用ではなく、バックステージ管理システム用です。チームがレスポンシブデザインをサポートする計画を持っているかどうかはわかりません。一方、Elementチームは、柔軟なレイアウトを作成するためのレスポンシブグリッドシステムを提供しています。

レスポンシブなナビゲーションメニューを構築することを検討する場合は、ケースを実現するために自分で実装する必要があります。

人々の生活をもう少し便利にするために、数日前にElementを使用して シンプルなレスポンシブメニューテンプレート を作成しました。

これがいくつかのアイデアを得るために役立つことを願っています。

7
JeffMinsungKim