update 抽屉组件

src/utils/app-drawer/app-drawer.ts

@@ -77,10 +77,7 @@ export class AppDrawer {
                 }
             }).$mount();
             this.vueExample = vm;
-            let app =  document.getElementById("app");
-            if(app){
-                app.appendChild(vm.$el);
-            }
+            document.body.appendChild(vm.$el);
             const comp: any = vm.$children[0];
             return comp.getSubject();
         } catch (error) {
@@ -110,6 +107,7 @@ export class AppDrawer {
             return new Subject<any>();
         }
     }
+    
 
     /**
      * 生成uuid

src/utils/app-drawer/app-drawer.vue

 <template>
 <div  class="drawer">
-    <div :id="uuid"></div>
-    <ion-menu
-        :side="placement"
-        :content-id="uuid"
-        :ref="uuid+'drawer'"
-        @ionDidClose="close"
-        @on-visible-change="onVisibleChange($event)">
-        <ion-content>
-        <component
+    <van-popup @closed="close" v-model="isShow" :position="placement" :style="{ width:'80%', height: '100%' }" >
+            <component
             :is="viewname"
             class="viewcontainer2"
             :viewDefaultUsage="false"
@@ -19,8 +12,7 @@
             @close="close($event)"
             :ref="viewname">
         </component>
-        </ion-content>
-    </ion-menu>
+    </van-popup>
 </div>
 </template>
 
@@ -73,6 +65,7 @@ export default class AppDrawerCompponent extends Vue {
      */
     public subject: null | Subject<any> = new Subject<any>();
 
+
     /**
      * 抽屉弹出位置
      *
@@ -89,7 +82,7 @@ export default class AppDrawerCompponent extends Vue {
      * @type {boolean}
      * @memberof AppDrawerCompponent
      */
-    public isShow: boolean = true;
+    public isShow: boolean = false;
 
     /**
      * 零时结果
@@ -140,7 +133,7 @@ export default class AppDrawerCompponent extends Vue {
      */
     public created() {
         this.viewname = this.view.viewname;
-        this.placement = this.view.placement === 'DRAWER_LEFT' ? 'start' : 'end';
+        this.placement = this.view.placement === 'DRAWER_LEFT' ? 'left' : 'right';
         if (this.view.width) {
             if (this.view.width.toString().indexOf('px') > 0) {
                 if (!Object.is(this.view.width, '0px')) {
@@ -174,10 +167,6 @@ export default class AppDrawerCompponent extends Vue {
     public mounted() {
         this.isShow = true;
         this.handleZIndex('ivu-drawer-mask', 'ivu-drawer-wrap');
-        let drawer :any = this.$refs[this.uuid+'drawer'];
-            if(drawer){
-                drawer.open()
-            }
     }
 
     /**
@@ -261,7 +250,9 @@ export default class AppDrawerCompponent extends Vue {
                 this.isShow = true;
                 const title: any = this.$t('app.tabpage.sureclosetip.title');
                 const contant: any = this.$t('app.tabpage.sureclosetip.content');
+                
             } 
+            this.handleShowState(true);
         }
     }
 
@@ -276,16 +267,15 @@ export default class AppDrawerCompponent extends Vue {
         }
         if (this.subject) {
             if (this.tempResult && Object.is(this.tempResult.ret, 'OK')) {
-                this.subject.next(this.tempResult);
+                
             }
+            this.subject.next(this.tempResult);
         }
-        setTimeout(() => {
-            console.log(this.$el)
-            document.body.removeChild(this.$el);
-            this.$destroy();
-            this.subject = null;
-        }, 500)
-
+        // setTimeout(() => {
+        //     // document.body.removeChild(this.$el);
+        //     this.$destroy();
+        //     this.subject = null;
+        // }, 500)
     }
 }
 </script>