问题:如何为 ionic v4 vuejs 应用程序创建可滑动的侧边菜单?
所以我是 ionic 的新手,并且一直在尝试将现有的 Web 应用程序迁移到 ionic。使用 vue 遵循 ionic4 上有限文章的步骤。我在安装 Vue 之前安装了 @ionic/core,将 CDN 添加到索引文件中,并为 [/ion/] 网络组件添加了忽略标志。
我目前收到此错误:Menu: must have a "content" element to listen for drag events on.
我有点不确定要遵循什么,因为有许多关于 ion v2 和 v3 的文章,我知道对 ui-components 和基于 ionic4 beta 文档的方式做了一些更改,我似乎是正确的:'
<script lang="ts" src="./Layout.ts"></script>
<template>
<div class="layoutComponent">
<ion-page>
<ion-menu>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-item>
<router-link :to="{name: 'link 1'}">
<ion-label full>
<eg-localizer token="1"></localizer>
</ion-label>
</router-link>
</ion-item>
<ion-item>
<router-link :to="{ name: 'link2'}">
<ion-label full>
<localizer token="2"></localizer>
</ion-label>
</router-link>
</ion-item>
<ion-item>
<a target="_blank" href="https://foo.com">
<ion-label full>
<localizer token="external link 3"></localizer>
</ion-label>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- main point of entry for app content -->
<slot></slot>
</ion-page>
</div>
</template>
最佳答案
关于 ionic 框架的文档有点不清楚或不完整,但我能够使菜单正常工作:
<template>
<ion-menu side="start" content-id="menu-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="menu-content">
<ion-list lines="full">
<ion-item v-for="item in items" :key="item.name">
<ion-icon :name="item.icon" slot="start"></ion-icon>
<ion-label>{{ item.name }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
</template>
<script>
export default {
data () {
return {
items: [
{ name: 'Home', icon: 'home', href: 'home' },
{ name: 'About', icon: 'information-circle', href: 'about' },
{ name: 'Articles', icon: 'list-box', href: 'articles' },
{ name: 'Log out', icon: 'logout', href: 'logout' }
]
}
}
}
</script>
关键在这里:
<ion-menu side="start" content-id="menu-content">
和这里
<ion-content id="menu-content">
希望这可以帮助任何人。
关于javascript - Ionic4+VueJS 汉堡菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52279785/