Ionic 4+Vue JS 汉堡菜单

Posted 2023-02-22

【中文标题】Ionic 4+Vue JS 汉堡菜单

【英文标题】：Ionic4+VueJS hamburger menu

【发布时间】：2019-02-16 04:28:31

【问题描述】：

问题：如何为 ionic v4 vuejs 应用创建可滑动的侧边菜单？

所以我是 ionic 新手，一直在尝试将现有的网络应用迁移到 ionic。按照 ionic4 和 vue 上的有限文章的步骤进行操作。我在安装 Vue 之前安装了 @ionic/core，将 CDN 添加到索引文件中，并为 [/ion/] 网络组件添加了忽略标志。

我目前收到此错误：Menu: must have a "content" element to listen for drag events on.

我有点不确定要遵循什么，因为有很多关于 ion v2 和 v3 的文章，我知道对 ui 组件的方式和基于 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>

【问题讨论】：

这里有一个示例项目forum.ionicframework.com/t/ionic-4-vue-js-menu-help/141264

我尝试了这些更改以及 github 上的 ionic-team 示例：github.com/ionic-team/ionic/blob/master/core/src/components/… 错误消失了，但菜单在屏幕上不可见。我在检查器和影子 dom 上看到了 Web 组件，但没有呈现任何内容

【参考方案1】：

有关离子框架的文档有点不清楚或不完整，但我能够使菜单正常工作：

<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">

希望这对任何人都有帮助。

【讨论】：

完美男人谢谢

【参考方案2】：

对于 Ionic 6 + Vue js 3.0，请确保您的组件 <ion-router-outlet /> 在 <ion-content> 中，并且该 ion-content 应该具有您在菜单的 content-id 参数中指定的 id。

  <ion-content id="main">
    <ion-router-outlet />
    </ion-content>

【讨论】：

引用此的任何文档链接