J'essaie de créer un SPA réactif basé sur les composants vue.js et element-ui. Il a une mise en page réactive prête à l'emploi et cela fonctionne bien, mais je ne peux pas comprendre comment faire en sorte que le composant NavMenu (el-menu) monte ou se cache sous un `` burger '' sur les appareils mobiles.
Le résultat actuel est juste un menu vertical au-dessus du contenu, vous devez donc faire défiler vers le bas un moment.
Ma disposition 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>
Le Element , il n'est pas conçu pour une plateforme mobile, c'est pour un système de gestion backstage. Je ne sais pas si l'équipe a un plan pour soutenir la conception réactive ou non. D'autre part, l'équipe Element fournit un système de grille réactif pour faire une mise en page flexible.
Si vous envisagez de créer un menu de navigation réactif, vous devez l'implémenter vous-même pour atteindre vos cas.
Juste pour rendre la vie des gens un peu plus pratique, j'ai créé un modèle de menu réactif simple en utilisant Element il y a quelques jours.
J'espère que cela vous aidera à obtenir des idées.