侧滑菜单支持左滑退出

src/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue

 <template>
     <div class="app-mob-menu-sideslip-view">
         <van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }" duration="0.2">
-            <div class="app-menu-plugin">
-              <div class="header">
-                <img src="assets/images/logo.png" class="ibizLogo"/>
-                <div class="title">iBizPMS</div>
-                <div class="text">登录·试用测试版</div>
-                <div class="notice"><ion-icon name="megaphone-outline"></ion-icon> #最新通知——更新/下载</div>
-              </div>
-              <div class="top">
-                <div class="title">Menu</div>
-                <template v-for="item in items"  >
-                  <template v-if="!item.hidden">
-                    <div class="list" :key="item.index" @click="active(item)">
-                      <ion-icon :name=" item.iconcls ? item.iconcls : 'home' "></ion-icon>
-                      <div class="text">
-                        <ion-label v-if="item.appfunctag != 'settings'">{{$t(`app.menus.${menuName}.${item.name}`)}}</ion-label>
-                        <ion-label v-else>{{item.text}}</ion-label>
-                        <ion-badge color="danger" v-if="counterServide && counterServide.counterData && counterServide.counterData[item.counterid]"><ion-label>{{counterServide.counterData[item.counterid]}}</ion-label></ion-badge>
+          <v-touch v-on:swipeleft="onSwipeLeft" style="height:100%;">
+              <div class="app-menu-plugin">
+                <div class="header">
+                  <img src="assets/images/logo.png" class="ibizLogo"/>
+                  <div class="title">iBizPMS</div>
+                  <div class="text">登录·试用测试版</div>
+                  <div class="notice"><ion-icon name="megaphone-outline"></ion-icon> #最新通知——更新/下载</div>
+                </div>
+                <div class="top">
+                  <div class="title">Menu</div>
+                  <template v-for="item in items"  >
+                    <template v-if="!item.hidden">
+                      <div class="list" :key="item.index" @click="active(item)">
+                        <ion-icon :name=" item.iconcls ? item.iconcls : 'home' "></ion-icon>
+                        <div class="text">
+                          <ion-label v-if="item.appfunctag != 'settings'">{{$t(`app.menus.${menuName}.${item.name}`)}}</ion-label>
+                          <ion-label v-else>{{item.text}}</ion-label>
+                          <ion-badge color="danger" v-if="counterServide && counterServide.counterData && counterServide.counterData[item.counterid]"><ion-label>{{counterServide.counterData[item.counterid]}}</ion-label></ion-badge>
+                        </div>
                       </div>
-                    </div>
+                    </template>
                   </template>
-                </template>
+                </div>
               </div>
-            </div>    
+            </v-touch>
         </van-popup>
-        <v-touch v-on:swiperight="onSwipeLeft" style="height:100%;">
+        <v-touch v-on:swiperight="onSwipeRight" style="height:100%;">
           <template v-for="item in items">
                   <template v-if="!item.hidden">
                           <component  :key="item.id" v-if="item.id == activeId" :is="item.componentname" viewDefaultUsage="indexView"></component>
@@ -43,15 +45,25 @@ import { Environment } from '@/environments/environment';
     }
 })
 export default class AppMobMenuSideslipView extends Vue {
-  
+
     /**
-     * 滑动打开弹出层
+     * 向左滑动关闭弹出层
      *
      * @type {*}
      * @memberof AppMobMenuSideslipView
      */
     public onSwipeLeft(){
-      this.showPopup= true;
+      this.showPopup = false;
+    }
+
+    /**
+     * 向右滑动打开弹出层
+     *
+     * @type {*}
+     * @memberof AppMobMenuSideslipView
+     */
+    public onSwipeRight(){
+      this.showPopup = true;
     }
 
     /**
@@ -212,13 +224,11 @@ export default class AppMobMenuSideslipView extends Vue {
      * @memberof AppMobMenuSideslipView
      */
     public mounted() {
-        let ionNav:any = this.$refs.ionNav;
         let currPage = sessionStorage.getItem("currId");
         if(currPage){
             this.items.forEach((item:any,index:number) => {
                 if(item.id == currPage){
-                    this.activeId =  item.id       
-                    ionNav.select(item.name);
+                    this.activeId =  item.id;    
                 }
             })
         } 
@@ -283,26 +293,6 @@ export default class AppMobMenuSideslipView extends Vue {
         return val;
     }
 
-    /**
-     * 选中菜单项
-     *
-     * @param {*} $event
-     * @returns {void}
-     * @memberof AppMobMenuSideslipView
-     */
-    public selectItem($event: any): void {
-        if (!$event) {
-            return ;
-        }
-        let { detail } = $event;
-        if (!detail) {
-            return ;
-        }
-        let { tab }  = detail;
-        if (!tab) {
-            return;
-        }
-    }
 }
 </script>