抽屉组件

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

@@ -21,6 +21,8 @@ export class AppDrawer {
      */
     private static readonly $drawer = new AppDrawer();
 
+    private $refs :any=  {equipmentForm: HTMLFormElement,upload: HTMLFormElement}
+
     /**
      * 构造方法
      * 
@@ -75,7 +77,10 @@ export class AppDrawer {
                 }
             }).$mount();
             this.vueExample = vm;
-            document.body.appendChild(vm.$el);
+            let app =  document.getElementById("app");
+            if(app){
+                app.appendChild(vm.$el);
+            }
             const comp: any = vm.$children[0];
             return comp.getSubject();
         } catch (error) {

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

 <template>
-    <drawer
-        :placement="placement"
-        :closable="false"
-        v-model="isShow"
-        :width="width"
+<div  class="drawer">
+    <div :id="uuid"></div>
+    <ion-menu
+        :side="placement"
+        :content-id="uuid"
+        :ref='viewname'
+        @ionDidClose="close"
         @on-visible-change="onVisibleChange($event)">
+        <ion-content>
         <component
             :is="viewname"
             class="viewcontainer2"
@@ -16,8 +19,11 @@
             @close="close($event)"
             :ref="viewname">
         </component>
-    </drawer>
+        </ion-content>
+    </ion-menu>
+</div>
 </template>
+
 <script lang="ts">
 import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
 import { Subject } from "rxjs";
@@ -26,6 +32,7 @@ import { Subject } from "rxjs";
 })
 export default class AppDrawerCompponent extends Vue {
 
+
     /**
      * 视图UI参数
      *
@@ -42,6 +49,14 @@ export default class AppDrawerCompponent extends Vue {
      */
     @Prop({ default: {} }) public context?: any;
 
+    /**
+     * 视图上下文
+     *
+     * @type {*}
+     * @memberof AppDrawerCompponent
+     */
+    @Prop() public uuid?: any;
+
     /**
      * 视图参数
      *
@@ -66,13 +81,15 @@ export default class AppDrawerCompponent extends Vue {
      */
     public placement: string = '';
 
+
+
     /**
      * 是否显示
      *
      * @type {boolean}
      * @memberof AppDrawerCompponent
      */
-    public isShow: boolean = false;
+    public isShow: boolean = true;
 
     /**
      * 零时结果
@@ -123,7 +140,7 @@ export default class AppDrawerCompponent extends Vue {
      */
     public created() {
         this.viewname = this.view.viewname;
-        this.placement = this.view.placement === 'DRAWER_LEFT' ? 'left' : 'right';
+        this.placement = this.view.placement === 'DRAWER_LEFT' ? 'start' : 'end';
         if (this.view.width) {
             if (this.view.width.toString().indexOf('px') > 0) {
                 if (!Object.is(this.view.width, '0px')) {
@@ -157,6 +174,10 @@ 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.viewname];
+            if(drawer){
+                drawer.open()
+            }
     }
 
     /**
@@ -177,16 +198,16 @@ export default class AppDrawerCompponent extends Vue {
      * @memberof AppDrawerCompponent
      */
     public handleZIndex(mask: string, wrap: string) {
-        const zIndex = this.$store.getters.getZIndex();
-        if (zIndex) {
-            this.zIndex = zIndex + 100;
-            this.$store.commit('updateZIndex', this.zIndex);
-        }
-        const element: Element = this.$el;
-        const maskTag: any = element.getElementsByClassName(mask)[0];
-        const warpTag: any = element.getElementsByClassName(wrap)[0];
-        maskTag.style.zIndex = this.zIndex;
-        warpTag.style.zIndex = this.zIndex;
+        // const zIndex = this.$store.getters.getZIndex();
+        // if (zIndex) {
+        //     this.zIndex = zIndex + 100;
+        //     this.$store.commit('updateZIndex', this.zIndex);
+        // }
+        // const element: Element = this.$el;
+        // const maskTag: any = element.getElementsByClassName(mask)[0];
+        // const warpTag: any = element.getElementsByClassName(wrap)[0];
+        // maskTag.style.zIndex = this.zIndex;
+        // warpTag.style.zIndex = this.zIndex;
     }
 
     /**
@@ -199,6 +220,8 @@ export default class AppDrawerCompponent extends Vue {
             Object.assign(this.tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
         }
         this.isShow = false;
+        // (this.$refs.drawer as any).dismiss();
+        this.onVisibleChange(true);
     }
 
     /**
@@ -238,20 +261,7 @@ 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.$Modal.confirm({
-                //     title: title,
-                //     content: contant,
-                //     onOk: () => {
-                //         this.$store.commit('viewaction/setViewDataChange', { viewtag: _viewtag, viewdatachange: false });
-                //         this.isShow = false;
-                //     },
-                //     onCancel: () => {
-                //         this.isShow = true;
-                //     }
-                // });
-            } else {
-                this.handleShowState($event);
-            }
+            } 
         }
     }
 
@@ -261,7 +271,7 @@ export default class AppDrawerCompponent extends Vue {
      * @memberof AppDrawerCompponent
      */
     public handleShowState($event: any) {
-        if ($event) {
+        if (!$event) {
             return;
         }
         if (this.subject) {
@@ -270,10 +280,12 @@ export default class AppDrawerCompponent extends Vue {
             }
         }
         setTimeout(() => {
+            console.log(this.$el)
             document.body.removeChild(this.$el);
             this.$destroy();
             this.subject = null;
         }, 500)
+
     }
 }
 </script>