[dubbo-admin] branch develop updated: fix #714 (#719)

[ranke]

This is an automated email from the ASF dual-hosted git repository.

ranke pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/dubbo-admin.git


The following commit(s) were added to refs/heads/develop by this push:
     new 82af353  fix #714 (#719)
82af353 is described below

commit 82af353005ad2faffef9d55b3286dc1039ef627c
Author: tzr164 <tzr...@163.com>
AuthorDate: Mon Mar 29 15:08:13 2021 +0800

    fix #714 (#719)
    
    Co-authored-by: tangziran <823013778@qqcom>
---
 dubbo-admin-ui/src/components/apiDocs/ApiDocs.vue | 58 ++++++++++++++++++++---
 1 file changed, 52 insertions(+), 6 deletions(-)

diff --git a/dubbo-admin-ui/src/components/apiDocs/ApiDocs.vue 
b/dubbo-admin-ui/src/components/apiDocs/ApiDocs.vue
index 1499be9..2ea8fac 100644
--- a/dubbo-admin-ui/src/components/apiDocs/ApiDocs.vue
+++ b/dubbo-admin-ui/src/components/apiDocs/ApiDocs.vue
@@ -15,7 +15,7 @@
   - limitations under the License.
   -->
 <template>
-  <v-container grid-list-xl fluid>
+  <v-container grid-list-xl fluid v-scroll:#scroll-target="onScroll">
   <v-layout row wrap>
     <v-flex lg12>
     <breadcrumb title="apiDocs" :items="breads"></breadcrumb>
@@ -50,7 +50,7 @@
   </v-layout>
 
   <v-layout row wrap>
-    <v-flex lg3>
+    <v-flex lg3 
:class="{'sticky_top':isApiListDivFixed,'menu_panel_class':isBigScreen}" >
       <v-card id="apiListDiv"
         class="mx-auto"
       >
@@ -59,7 +59,7 @@
           <v-toolbar-title>{{ $t('apiDocsRes.apiListText') }}</v-toolbar-title>
           <v-spacer></v-spacer>
         </v-toolbar>
-        <v-list>
+        <v-list :class="isBigScreen?'menu_panel_content':''">
           <v-list-group
             v-for="item in apiModules"
             :key="item.title"
@@ -87,8 +87,8 @@
         </v-list>
       </v-card>
     </v-flex>
-    <v-flex lg9>
-      <v-card id="apiFormDiv">
+    <v-flex lg9 :class="isBigScreen?'apidocs_content':''">
+      <v-card id="apiFormDiv" ref="apiFormDiv">
         <apiForm :formInfo="formInfo" />
       </v-card>
     </v-flex>
@@ -105,6 +105,21 @@ export default {
     Breadcrumb,
     ApiForm
   },
+  computed:{
+    isBigScreen:function(){
+      const _this = this;
+      var isBigScreen = false;
+      if(_this.$vuetify.breakpoint){
+        isBigScreen = _this.$vuetify.breakpoint.md || 
_this.$vuetify.breakpoint.lg || _this.$vuetify.breakpoint.xl;
+      }
+
+      return  isBigScreen;
+    }
+  },
+  created(){
+    const _this = this;
+    console.debug(_this.$vuetify.breakpoint.md);
+  },
   data: () => ({
     breads: [
       {
@@ -196,17 +211,48 @@ export default {
         
document.getElementById('apiListDiv').classList.remove('apiListDiv-fixed')
         document.getElementById('apiListDiv').style.top = '0px'
       }
+    },
+    onScroll () {
+        const _this = this;
+        var scrollTop = document.documentElement.scrollTop || 
document.body.scrollTop
+        var offsetTop = document.getElementById('apiFormDiv').offsetTop
+
+        if(scrollTop >= offsetTop && _this.isBigScreen){
+          _this.isApiListDivFixed = true;
+        }else{
+          _this.isApiListDivFixed = false;
+        }
+
     }
   },
   mounted () {
-    window.addEventListener('scroll', this.fixedApiListDiv)
+    window.addEventListener('scroll', this.onScroll)
   }
 }
 </script>
 <style scoped>
 
+  .sticky_top{
+    position: fixed;
+    top:64px;
+  }
+
+  .menu_panel_content{
+    max-height: 500px;
+    overflow-y: scroll;
+  }
+
   .apiListDiv-fixed{
     position: fixed;
   }
+  .menu_panel_class{
+    position: fixed;
+    width: 25%;
+    z-index: 1000;
+  }
+
+  .apidocs_content{
+    margin-left:30%;
+  }
 
 </style>