Ionic5 Vue3中实现侧边栏，Ionic5 Vue3中的侧边栏组件ion-menu

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

一、侧边栏ion-menu组件的基本使用

1、创建项目

ionic start myApp sidemenu

2、配置项目

属性 作用 可选值 side 配置侧边栏的位置 start end menu-id 侧边栏的唯一标识 type 配置侧边栏的弹出方式 overlay, reveal, push swipe-gesture 滑动弹出侧边栏 true false content-id 关联ion-router-outlet的id

<ion-menu side="start" menu-id="first" content-id="main">
   <ion-header>
     <ion-toolbar color="primary">
       <ion-title>Start Menu</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
     <ion-list>
       <ion-item>Menu Item</ion-item>
       <ion-item>Menu Item</ion-item>
       <ion-item>Menu Item</ion-item>
       <ion-item>Menu Item</ion-item>
       <ion-item>Menu Item</ion-item>
     </ion-list>
   </ion-content>
 </ion-menu>
 <ion-router-outlet id="main"></ion-router-outlet>

二、侧边栏ion-menu结合ion-menu-toggle

<ion-menu side="start" menu-id="first" content-id="main">
     <ion-header>
       <ion-toolbar color="primary">
         <ion-title>Start Menu</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <ion-list>
         <ion-menu-toggle>
           <ion-item router-direction="root" router-link="/button">Menu Button</ion-item>
         </ion-menu-toggle>
         <ion-menu-toggle>
           <ion-item router-direction="root" router-link="/icon">Menu Icon</ion-item>
         </ion-menu-toggle>
         <ion-menu-toggle>
           <ion-item>Menu Item</ion-item>
         </ion-menu-toggle>
         <ion-menu-toggle>
           <ion-item>Menu Item</ion-item>
         </ion-menu-toggle>
       </ion-list>
     </ion-content>
 </ion-menu>
 <ion-router-outlet id="main"></ion-router-outlet>

三、侧边栏ion-menu结合ion-menu-button

<ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
         <ion-menu-button menu="first"></ion-menu-button>
       </ion-buttons>
       <ion-title>Tab 1</ion-title>
     </ion-toolbar>
</ion-header>

四、侧边栏ion-menu中的事件和方法

Ionic Vue中允许我们用js控制侧边栏，具体步骤如下。

1、给ion-menu定义menu-id属性

<ion-menu side="start" menu-id="first" content-id="main">
</ion-menu>

2、控制菜单的页面（组件）中引入下面代码：

import { 
  menuController
} from '@ionic/vue';

注意：menuController是一个控制器，不是组件

3、对应方法中通过js控制侧边栏

openFirst() {
  menuController.enable(true, 'first');
  menuController.open('first');
}

五、底部tabs结合侧边栏ion-menu

<template>
  <ion-app>
    <ion-menu side="start" menu-id="first" content-id="main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle>
            <ion-item router-direction="root" router-link="/button">Menu Button</ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle>
            <ion-item router-direction="root" router-link="/icon">Menu Icon</ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle>
            <ion-item>Menu Item</ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle>
            <ion-item>Menu Item</ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main" />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet, IonItem, IonList, IonMenu } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    IonRouterOutlet,
    IonItem,
    IonList,
    IonMenu,
  },
});
</script>