优化抽屉弹窗

resources/assets/js/components/LuckySheet.vue

@@ -107,7 +107,7 @@ export default {
                 loading: {
                     image: 'image://' + $A.originUrl('js/luckysheet/css/loading.gif')
                 },
-                data: value ? $A.cloneJSON(value) : [
+                data: $A.isArray(value) ? $A.cloneJSON(value) : [
                     {
                         "name": "Sheet1",
                     }

resources/assets/js/components/OnlyOffice.vue

@@ -52,10 +52,18 @@ export default {
             docEditor: null,
         }
     },
+
     mounted() {
         //
     },
 
+    beforeDestroy() {
+        if (this.docEditor !== null) {
+            this.docEditor.destroyEditor();
+            this.docEditor = null;
+        }
+    },
+
     computed: {
         ...mapState(['userToken', 'userInfo']),
     },
@@ -135,7 +143,9 @@ export default {
                     "callbackUrl": this.serverUrl + 'api/file/content/office?id=' + this.value.id + '&token=' + this.userToken,
                 }
             };
-            this.docEditor = new DocsAPI.DocEditor(this.id, config);
+            this.$nextTick(() => {
+                this.docEditor = new DocsAPI.DocEditor(this.id, config);
+            })
         }
     }
 }

resources/assets/js/pages/manage/file.vue

@@ -195,7 +195,21 @@
         </Modal>
 
         <!--查看修改文件-->
-        <Drawer
+        <div :class="['shot-overlay', editShow ? 'overlay-visible' : 'overlay-hide']">
+            <div class="overlay-content">
+                <div class="shot-container">
+                    <FileContent v-if="editShowNum > 0" :parent-show="editShow" :file="editInfo"/>
+                </div>
+            </div>
+            <a href="javascript:void(0)" class="close-overlay" @click="editShow=false">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
+                    <path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
+                </svg>
+            </a>
+        </div>
+
+
+<!--        <Drawer
             v-model="editShow"
             placement="bottom"
             :height="editHeight"
@@ -203,7 +217,7 @@
             :mask-style="{backgroundColor:'rgba(0,0,0,0.7)'}"
             class-name="page-file-drawer">
             <FileContent v-if="editShowNum > 0" :parent-show="editShow" :file="editInfo"/>
-        </Drawer>
+        </Drawer>-->
     </div>
 </template>
 

resources/assets/sass/pages/page-file.scss

@@ -525,9 +525,78 @@
     }
 }
 
-
 .page-file-drawer {
     .ivu-drawer-content {
         border-radius: 20px 20px 0 0 !important;
     }
 }
+
+.shot-overlay {
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 0;
+    height: 0;
+    position: fixed;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    opacity: 0;
+    pointer-events: none;
+    background: rgba(0, 0, 0, 0.8);
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: auto;
+    cursor: pointer;
+    &.overlay-visible {
+        pointer-events: auto;
+        opacity: 1;
+        width: 100%;
+        height: 100%;
+        transition: opacity 0.2s ease;
+        .overlay-content {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            transition: opacity 0.2s ease, transform 0.3s ease;
+        }
+    }
+    &.overlay-hide {
+        transition: opacity 0.2s ease;
+        .overlay-content {
+            transform: translateY(15%) scale(0.98);
+            transition: opacity 0.2s ease, transform 0.2s ease
+        }
+    }
+    &:focus {
+        outline: none
+    }
+    .overlay-content {
+        position: relative;
+        background: #fff;
+        margin-top: 40px;
+        border-radius: 12px 12px 0 0;
+        height: calc(100vh - 40px);
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        opacity: 0;
+        transform: translateY(15%) scale(0.98);
+        cursor: default
+    }
+    .close-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 40px;
+        height: 40px;
+        color: #dbdbde;
+        z-index: 1;
+        &:hover {
+            color: #fff
+        }
+        .icon {
+            width: 24px;
+            height: 24px
+        }
+    }
+}