반응형
NavMenu가 요소 UI에서 응답할 수 있습니까?
vue.js와 element-ui 컴포넌트를 기반으로 응답성이 뛰어난 SPA를 만들려고 합니다.개봉 후 바로 반응하는 레이아웃으로 동작은 정상이지만 모바일 기기에서는 NavMenu(el-menu) 컴포넌트를 위로 이동시키거나 '버거' 아래에 숨기는 방법을 알 수 없습니다.
현재 결과는 내용 위의 세로 메뉴일 뿐이므로 잠시 아래로 스크롤해야 합니다.
내 앱.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>
Element는 모바일 플랫폼용으로 설계된 것이 아니라 백스테이지 관리 시스템용으로 설계되었습니다.나는 그 팀이 반응성 있는 디자인을 지원할 계획이 있는지 잘 모르겠다.한편, Element 팀은 유연한 레이아웃을 만들기 위해 응답성 그리드 시스템을 제공합니다.
응답성이 뛰어난 네비게이션메뉴를 구축하는 것을 검토하고 있는 경우는, 그 네비게이션메뉴를 스스로 실장해, 케이스를 실현할 필요가 있습니다.
사람들의 생활을 조금 더 편리하게 하기 위해 며칠 전에 Element를 사용하여 간단한 응답 메뉴 템플릿을 만들었습니다.
이게 당신에게 도움이 되길 바랍니다. 아이디어를 얻으려면.
언급URL : https://stackoverflow.com/questions/48306392/can-a-navmenu-be-responsive-in-element-ui
반응형
'source' 카테고리의 다른 글
Vue와 함께 글꼴 awesome을 사용하여 타이프스크립트 빌드 오류 발생 (0) | 2022.08.03 |
---|---|
vue-socket.io 여러 웹 소켓 서버에 접속하는 방법 (0) | 2022.08.03 |
SSR 사용 시 Nuxt Store의 초기 상태가 정의되지 않았습니다. (0) | 2022.08.03 |
내 프로젝트에서 코르도바 플러그인을 가져오는 방법 (0) | 2022.08.03 |
Vue.js 3 - "export 'createStore'를 'vuex'에서 찾을 수 없습니다. (0) | 2022.08.03 |